印机打印的三种方式、适用各种web框架(vue.js/web打印/报表打印)_哔哩哔哩_bilibili

Vue实现打印的方式

第一种打印的方式html 打印

1、谷歌浏览器自带的功能，Ctrl + P，会弹出打印预览界面

2、JavaScrpit的方法也可以弹出同样的页面，可以选择全部打印和局部打印

3、第二种打印的方法是

4、优秀的web打印插件通常支持模版设计功能

5、我们通常要设计好插件的打印模版

6、

7、第三种是指令打印

8、指令打印是通过打印插件向打印机发送指令

9、可以向打印机端口或驱动发送原始指令

10、条码打印机，RFID打印机就有很好的支持

11、指令打印的优势是打印的速度和稳定

具体使用-----12、为了实现局部打印，需要在Vue项目中引用组件

---------------------------------------------------------------------------------------------

如何使用在Vue项目输入npm i vue-print-nb

安装后在Vue项目中进行引入

import Print from 'vue-print-nb'

先在项目中进行跑一跑

再在打印机中添加打印按钮 <button v-print>

选择打印会覆盖整个页面

会整个打印全部页面

如果想要实现局部打印：

局部打印HTML的写法，标签写着id

局部打印的写法,这里写了局部打印的内容

点击打印就可以简单实现局部打印的功能

-----------------------------------------------------------------------------------------------------------------------------

方法2，插件打印，老牌的C-LODOP,很多电商后台和快递后台都在用这个

官网地址

www.lodnp.net/download.html

这里有来跟C-

用来跟C-Lodop通讯的JavaScript的包

将loadop.js引用到的web框架中

在index页面中，引入打印的方法，import {}

接着设计两个打印设计的按钮

新建打印模版

打印设计用来调用C-Lodop的设计窗口

打印预览就是设计一个模版

提供一些常用的空间控件

条形码，二维码，html页面预览等

添加一个超文本框作为标题栏

接着是打印名称

设计完可以直接关闭窗体

预览窗体中可以直接进行打印

也可以添加LODOP.PRINT()函数进行打印

指令打印的方法

​

印就是把页面上的文字、图片等可见数据通过打印机等输出在纸张上的操作，浏览器基本都自带打印功能。在你需要打印的页面中按下组合键“Ctrl+p”就可以调用打印功能，它会把该页面中的所有可见内容（即window.document.body.innerHTML中的内容）都输出到打印中。当然如果你的网页版面太大可能会出现无法正确打印文件，比如出现打印不全（超出可打印的范围被切除）或者部分内容缺失（部分内容丢失）。这时候我们就需要选择更大的纸张来打印页面了，默认纸张尺寸为A4大小。

vue-print-nb打印

如果你想打印指定区域的内容那么就需要在项目中自己实现打印功能了，Vue中实现打印功能目前有两种比较常用的方法，一种是通过组件vue-print-nb来实现。直接通过命令安装：npm i vue-print-nb -S ，在main.js中进行全局注册组件。在需要打印内容的区域设置id，然后通过v-print来绑定该id实现对指定区域的内容进行打印。

当然如果你想配置更多的参数我们也可以通过v-print绑定对象，在对象中我们可以为打印设定以下属性：id、standard、extraHead、extraCss、popTitle和endCallback，具体的注释我在代码中有说明了。打印默认会显示页眉和页脚信息，你可以在打印界面自行取消勾选，也可以在直接定义css样式来隐藏页眉和页脚：@page{margin: 5mm; /* 设置打印中的打印边距*/} 。

vuePlugs_printjs插件打印

该插件提供了一个print.js文件（我将该文件放在项目中的src/assets目录下），同样在main.js中将其引入到项目中来。通过ref属性定位打印内容区域，vuePlugs_printjs更强大的一点就是即使内容在打印区域内也可以通过添加class="no-print"样式来屏蔽该元素中的内容。

打印二维码

前面通过文章Vue实战063：常见的几种二维码生成方法和保存至本地我们已经知道如何生成二维码了，这里我选用了vue-qr组件来生成二维码图像。接下来我们来打印这个二维码，这里我们只要在需要打印二维码的DOM标签上添加ref属性来定位打印区域，再通过一个按钮来触发打印功能即可。

遇到的问题

如果你用qrcode生成二维码的时候你就会发现在打印的时候该二维码并不会被显示，因为qrcode是通过canvas标签绘制的二维码图像，canvas绘制图像是异步执行的需加载完资源才会调用drawImage方法来绘制图像。打印功能是将指定区域的代码写入到新的窗口中进行输出的，再写入canvas标签时只是拿到了对应的标签并没有进行图像绘制自然就无法显示了。

解决方案

用img图像替换掉canvas画布，在调用打印之前调用canvas的toDataURL()方法将canvas数据转换成图片格式，创建一个img的标签元素并将toDataURL生成的数据赋给img标签的src属性，获取画布的父标签并把img标签内容加载到该父标签中同时删除画布标签内容，接着再执行打印功能即可。

​总结：

以上两种方式操作起来都很简单，个人比较喜欢vuePlugs_printjs插件，因为可控性相对强些可以过滤掉一些不需要输出的内容。以上内容是小编给大家分享的Vue指定区域打印功能的实现（附示例），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！

天小编在教课的时候，发现很多刚刚接触这个领域的同学对一些小的细节部分还是存在疑惑，网上的很多博客也只是只贴出了代码，并不了解是什么意思，小编今天就具体的来给大家讲一讲如何在vue-cli的环境下实现web的打印指定区域的内容(文字或者表格图表)，让大家在学习的过程中少走一些弯路。

走起，先看效果图：

如何实现上诉需求呢，咱们来一一讲解，首先咱们先把代码切分为四个部分：

1.创建一个构造函数Print

2.给Print的prototype添加需要用到的方法

3.声明一个常量MyPlugin为它添加方法，将Print方法挂载到Vue原型链上

4.export导出MyPlugin

第一步 创建一个构造函数Print，默认接受两个参数，一个是打印的指定区，一个是自定义页眉的标题。 要注意哦，有些同学这里可能会不懂这个判断的意思，因为这里的this是指向Vue的通过instanceof来判断这时候的this是否为Print的子类，如果不是，就通过new操作符调用，使this指向Print本身。

然后这里做一个容错，判断一下传进来的dom是否为object、是否有nodeType和nodeName这两个属性，如果没有，证明不是一个节点，那就取dom下的$el，然后把处理过后的dom和name分别赋值给this.dom和this.name，方便在prototype里随时取值同时执行初始化方法。

第二步 给Print的prototype添加需要用到的方法，init方法里为了实现打印并且自定义标题，我们需要重新获取到样式和页面元素，展示到一个新的html里面，最后通过writeIframe方法完成咱们最终打印的效果。

在getStyle方法里，自定义一个空字符串，通过querySelectorAll方法获取到当前页面全部的style和link标签，并且通过循环拿到每一个的outerHTML（纯文本形式）最后通过return暴露出来

getHtml方法主要是特殊处理一下input、textarea、select、canvas把前三个打value值重新获取通过innerHTML的方法展现出来，把canvas画布转换成图片的格式展现出来。

然后进入下一步setHeader方法，来自定义页眉的标题。这里是因为在DOM上，input、textarea、select中的值并没有在元素内，只有纯文本才可以被print()，同样打印也不支持canvas。所以咱们需要重新处理一下，使里面的值也可以被打印出来~

在这一步，咱们实际上是重新创建了一个html标签和title，然后通过克隆出要打印的区域，添加到新创建的html当中。然后return出这个新页面里的全部纯文本元素。这个时候已经咱们需要打印的html和自定义标题已经出来了。这里同学们千万要注意，因为打印的默认标题是页面里的title，如果直接改变原页面的title来实现自定义标题效果的话，会造成原页面的title错乱。

这个时候回到init方法，content就是咱们全部需要输入的标签。执行writeIframe方法，这里面主要是通过document.open来打开一个新文档，document.write来编写文档的内容，document.close来关闭文档操作使其内容可以显示出来。

然后红线圈出的地方有一个获取全部类名为isNeedRemove的操作，是因为之前在把canvas转换成图片的时候，给每个的后面都插入了一个转换后的img这里为了让图形不出现两个的情况，需要删除所有类名为isNeedRemove的节点，同时执行最终的打印方法。

这里的frameWindow形参其实就是咱们需要调用到的window，通过try catch来保证结果在一个控制范围内，如果成功运行调用window下的print方法，失败则抛出异常。

最终将写好的方法添加到vue的原型链上，在公共的main.js 里通过import引入，Vue.use挂载，然后在想要使用的组件内直接通过this.$print()使用即可

好啦~今天讲到这里希望大家对这个web前端来实现打印的方法有一个新的理解，希望能给到大家一些帮助~咱们下期再见。