VUE+vue-print-nb，vue打印我踩过的坑

这几天写了一个需求，要求打印条形码，先来张要打印出来的效果图吧，效果图大概长这样子（图是我随便找的，二维码扫出来是啥我也不知道，哈哈）

写这个需求的时候踩了太多的坑了，在此记录下辛酸史。

vue-print-nb基本用法

这个插件用法很简单，安装依赖后就可以直接使用(npm install vue-print-nb)，点击打印就会唤起打印弹框。

 <div style="display:none;"><div id="printStyle" ref="printTest"><div v-for="(item,index) in printList" :key="index" style="display:inline-block;padding:20px;margin-bottom:4px"><table style="fontSize:20px"><tr><th colspan="2">天然气有限公司</th></tr><tr><td colspan="2">资产名称：{{ item.name }}</td></tr><tr><td colspan="2">资产型号：{{ item.model }}</td></tr><tr><td>资产编码：{{ item.assetsCode }}</td><td rowspan="2" style="padding:0 10px"><div ref="codeItem" class="qrcode-pic" /></td></tr><tr><td>使用日期：{{ item.assetsTime }}</td></tr></table></div></div><button ref="printBtn" v-print="'#printStyle'">打印</button></div>

第一个坑：打印总是会多出一个空白页

解决办法：不能给html设置高度！！！

html {// height: 100%;box-sizing: border-box;
}

第二个坑：img标签无法打印，识别不出

解决办法：将需要打印的内容转为图片打印出来

//需要打印的图片
<img id="printStyle" style="display:none" :src="meetingDetail.qrCode" alt="">//触发打印的事件
<el-button id="printQrcode" v-print="'#printStyle'" style="display:none" type="primary">二维码打印</el-button>import html2canvas from 'html2canvas'
import printJS from 'print-js'// 打印二维码
printQrcode () {html2canvas(this.$refs.printStyle, {backgroundColor: null,useCORS: true,windowHeight: document.body.scrollHeight}).then((canvas) => {const url = canvas.toDataURL()printJS({printable: url,type: 'image',documentTitle: '打印图片'})})
},

VUE+vue-print-nb，vue打印我踩过的坑相关推荐

[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
Vue -print - nb 打印插件使用详解以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
使用Vue @media print在JavaScript中插入不同尺寸的打印页面，可自定义尺寸大小和打印机配置
本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写.使用教程.注意事项和避坑点,最后进行了总结. 一.介绍在开发Web应用程序时 ...
vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置
业务需求在开发时,遇到需求打印时既能切换A4纸张,又能切换成凭证纸张.而使用 @media 设置尺寸后,影响所有页面,无法实现打印多尺寸的问题. 打印技术使用浏览器自带的 print 打印技术打 ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
Vue使用PrintJS实现页面打印功能
说明大家好,我是呆小杰,收到一个需求,要求实现拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...

VUE+vue-print-nb，vue打印我踩过的坑

vue-print-nb基本用法

第一个坑：打印总是会多出一个空白页

解决办法：不能给html设置高度！！！

第二个坑：img标签无法打印，识别不出

解决办法：将需要打印的内容转为图片打印出来

VUE+vue-print-nb，vue打印我踩过的坑相关推荐

最新文章

热门文章