vue中打印不同的插件使用，转为图片打印

插件使用，转为图片打印"/>

vue中打印不同的插件使用，转为图片打印

前两种的方法比较适用于表格，表单的打印，如果出现大量的背景图，外部引入的资源图片，各种复杂的样式，就有可能导致背景图打印不出来，页面错位等各种问题，就可以使用第三种，把需要打印的内容转换为图片格式，然后再进行打印

第一种(vue-easy-print)

官方地址，内有官方demo

1、安装

npm install vue-easy-print --save

2、引用

只需要在使用的页面引用资源包，添加组件就可以，需要打印的内容实用vue-easy-print包裹

// 模版调用demo
<template><div id="app"><button @click="printDemo">测试打印</button><vue-easy-print tableShow ref="easyPrint" ><!-- 这里是你要打印的内容-打印的内容-打印的内容 --></vue-easy-print></div>
</template><script>
// 有的时候这里调用可能回出现查询不到下面组件，我们就从资源包直接调用
//import vueEasyPrint from "/node_modules/vue-easy-print/dist/vue-easy-print.js";
import vueEasyPrint from "vue-easy-print";
export default{methods:{printDemo(){ // 点击测试打印this.$refs.easyPrint.print()}},components: { // 调用组件vueEasyPrint}
}
</script>

第二种（vue-print-nb）

1、安装

npm install vue-print-nb --save

2、引用

在main配置文件中添加引用

// 全局配置
import Print from 'vue-print-nb'
Vue.use(Print);

3、使用

3.1 打印整个页面

<button v-print>Print the entire page</button>

3.2 打印局部内容

通过设置id可以打印想要打印的标签，局部的内容范围

<!-- html -->
<div id="printMe" style="background:red;"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花 </p><p>小小树藤是我家 啦啦啦啦 </p><p>叮当当咚咚当当　浇不大</p><p> 叮当当咚咚当当 是我家</p><p> 啦啦啦啦</p><p>...</p></div><button v-print="'#printMe'">Print local range</button>

3.3 打印配置

<!-- html --><button v-print="printObj">Print local range</button><div id="printMe" style="background:red;"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花 </p><p>小小树藤是我家 啦啦啦啦 </p><p>叮当当咚咚当当　浇不大</p><p> 叮当当咚咚当当 是我家</p><p> 啦啦啦啦</p><p>...</p></div>

// js
export default {data() {return {printObj: {id: "printMe", // 局部打印必填，对应打印内容的idpopTitle: 'good print', // 标题extraCss: ',', // 额外的css连接，多个逗号分隔extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 附加在head标签上的额外标签，使用逗号分隔endCallback:(e) => { // 打印后的回调事件console.log(e);}}};}
}

id：*必填需部分打印输入的ID
standard：文档类型，默认是HTML5，可选html5，loose，strict
extraHead：附加到head标签的附加标签，以逗号分隔
extraCss：附加链接连接，以逗号分隔
popTitle：标题显示标题
endCallback()：打印后的回调事件

第三种（页面转为图片打印）

由于某些原因，上面两种方法造成打印错位，只能通过转为图片的形式进行打印
这里使用到两个插件

html2Canvas官方文档（可以把html页面转换为图片）
/

Print.js官方文档（可以把图片格式打印出来）

1、安装

npm install --save html2canvas
npm install print-js --save

2、使用

<template><div><div ref="exportPdf">//转为图片打印的内容</div><el-button @click="toImg">打印</el-button></div>
</template>
<script>
// 引用两个插件
import html2canvas from 'html2canvas'; // 转为图片
import printJS from 'print-js' // 打印
export default {methods:{//转图片打印toImg() { // 转图片打印html2canvas(this.$refs.exportPdf, {backgroundColor: '#ffffff',useCORS: true,// width: window.screen.availWidth,// height: window.screen.availHeight,windowHeight: document.body.scrollHeight,y:window.pageYOffset}).then((canvas) => {// let url = canvas.toDataURL('image/jpeg', 1.0)const url = canvas.toDataURL()this.img = url//打印图片printJS({printable: url,type: 'image',documentTitle: '打印图片'})// base64格式图片打印查看// console.log(url)})}}
}</script>

参考文档：.html