vue 实现打印功能

1. window.print()

浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。

2. 使用插件vue-print-nb

调用 window.print() 会对整个 document.body 进行打印，而我们通常只需要打印一部分页面，可以使用打印插件

vue-print-nb

vue-print-nb

使用自定义指令

v-print

来进行打印，点击就能触发

1.安装

npm install vue-print-nb --save

2.在main.js文件中注册使用

import Print from'vue-print-nb'
Vue.use(Print);

3.具体使用方法：

（1）绑定id方法 （2）绑定对象方法

<!--绑定id方法--><div id='printBox'><div>需要打印的内容</div></div><button v-print='#printBox'>点击打印</button>

<!--绑定对象方法--><div id='printBox'><div>需要打印的内容</div></div><button v-print='printObj'>点击打印</button>exportdefault{data(){return{printObj:{id:'printBox',// 必要，打元素的idpopTitle:'打印',// 打印配置页上方标题extraHead:'',//最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔preview:'',// 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）previewTitle:'',// 打印预览的标题（开启预览模式后出现）,previewPrintBtnLabel:'',// 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex:'',// 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   previewBeforeOpenCallback(){},//预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback(){},// 预览窗口打开之后的callback（开启预览模式调用）beforeOpenCallback(){},// 开启打印前的回调事件openCallback(){},// 调用打印之后的回调事件closeCallback(){},//关闭打印的回调事件（无法确定点击的是确认还是取消）url:'',standard:'',extraCss:'',}}}}

4. 屏蔽不需要打印的元素

在组件的打印区域里，给需要隐藏的内容的标签上添加

class="noprint"

5.配置打印的样式

在全局样式中，新增标签，里面是打印时才生效的样式

<style media="print">
@page{size: auto;margin: 3mm;}html{background-color: #ffffff;height: auto;margin: 0px;}
</style>

6.打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

<style>
  .procedure{word-wrap:break-word;}
</style>

7.缺点

（1）无法打印本地图片，当需要打印的部分有本地图片时，打印之后图片不会显示。
（2）使用elementUI表格vxe-table表格打印时，会出现样式问题

8. 分页打印

不要使用定位，否则无法分页

<template><div><buttonv-print="'#print'">打印</button><divid="print">
             // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
            <divstyle="page-break-after:always">这是第二页</div><divstyle="page-break-after:always">这是第二页</div></div></div></template>

3. 使用插件print.js

插件文档：https://printjs.crabbly.com/

1.安装

npm install print-js --save

2. 使用

在需要打印功能的组件中引用

import print from'print-js'

<divid="printBox"> 打印内容</div><button@click="printClick()">点击打印</button>

printClick(){const style ='@page {margin:0 10mm};'//打印时去掉眉页眉尾printJS({printable:'printBox',// 标签元素idtype:'html',header:'',targetStyles:['*'],
        style
      });//各个配置项//printable:要打印的id。//type:可以是 html 、pdf、 json 等。//properties:是打印json时所需要的数据属性。//gridHeaderStyle和gridStyle都是打印json时可选的样式。//repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。//scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果//targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。//style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。//ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用},}