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

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

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打印我踩过的坑相关推荐

  1. [vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的?

    [vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过 不过我想应该差不多 ,多注意dom的渲染时机 和chart的实例化时机 在相 ...

  2. vue使用print.js实现打印功能,以及添加打印机

    print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...

  3. Vue -print - nb 打印插件 使用详解 以及连打操作

    Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...

  4. vue使用print.js打印插件

    任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据 官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...

  5. vue封装打印插件print.js实现打印组件功能

    代码 插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法 定义-print.js // 打印类属性.方法定义 /* eslint-di ...

  6. 使用Vue @media print在JavaScript中插入不同尺寸的打印页面,可自定义尺寸大小和打印机配置

    本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写.使用教程.注意事项和避坑点,最后进行了总结. 一.介绍 在开发Web应用程序时 ...

  7. vue @media print使用js插入打印页不同尺寸打印,可自定义尺寸大小,打印机配置

    业务需求 在开发时,遇到需求打印时既能切换A4纸张,又能切换成凭证纸张.而使用 @media 设置尺寸后,影响所有页面,无法实现打印多尺寸的问题. 打印技术 使用浏览器自带的 print 打印技术 打 ...

  8. Vue使用Print插件实现页面打印功能/打印列表

    Vue使用Print插件实现页面打印 示例 官网地址可以下载最新版 官网 下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...

  9. Vue使用PrintJS实现页面打印功能

    说明 大家好,我是呆小杰,收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...

最新文章

  1. CVPR2020 | 为尾部样本构造特征云,就像用电子云填充空旷的原子——长尾数据上的特征学习方法...
  2. AutoCAD 2021简体中文版
  3. Spring JDBC整合
  4. 淘宝应对双11的技术架构分析
  5. 时间序列研(part10)--误差修正模型
  6. php页面设置密码,PHP页面输入密码才能访问加密代码
  7. (转)RabbitMQ学习之spring整合发送同步消息
  8. Cesium:实现漫游飞行
  9. 基础矩阵,本质矩阵,单应性矩阵讲解,在ORB-SLAM相机的位姿初始化的应用
  10. 什么是主数据?有什么作用?
  11. C++入门基础(上)
  12. <C++>文件操作基础详解,快来写出你的第一个文件吧
  13. z5s+android+4.4,中兴NX403a(Nubia Z5S Mini Android 4.4)刷Recovery教程
  14. 企业技术中心申报条件
  15. HyperLynx(十八)DDR(一)DDR简介和DDR的数据仿真
  16. vue从服务器获取csv文件,前端 VUE 解析 CSV 文件
  17. OTT广告价值「锋芒毕露」,谁能蚕食更大市场?
  18. ICCV 2019视频目标跟踪算法Pipeline集合
  19. java完成excel导出下载
  20. 孙正义:未来30年的人工智能和物联网

热门文章

  1. linux 内存管理 (四) 内存与IO的交互
  2. 前端数据展示为符号∞等情况
  3. java字符串转数字,各种数字转字符串的3种方法
  4. Java SE学习【二】——面向对象
  5. 【随笔】2018年10月之家庭篇
  6. 用python浪漫告白_python应用|七夕快到了,教你用python去表白!
  7. 无限火力更新服务器公告,2021无限火力时间表公告 lol无限火力什么时候开放
  8. java枚举 数字_java 枚举
  9. java 枚举参数为对象_Java枚举值
  10. 双卡双4G还不够华为Mate 10为你带来双VoLTE通话体验