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

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

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. NewPhy.-揭秘优势种dominant species
  2. [Spring cloud 一步步实现广告系统] 8. 检索系统配置依赖
  3. 机器学习之神经网络模型-上(Neural Networks: Representation)
  4. MySQL InnoDB Cluster安装
  5. Android之如何解决ScrollView起始位置不是最顶部的解决办法
  6. MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established
  7. C++ string assign()赋值常用方法
  8. 怎样写一个具有异步交互的React组件的单元测试
  9. Microsoft Expression Studio 3中文版
  10. 如何自动清理从 Mac 到 Dropbox 的屏幕截图?
  11. linux合并pdf命令,LINUX下合并PDF
  12. 知行之桥®中文版EDI系统正式发布
  13. 怎么将几张pdf合并成一张_怎么把多个PDF合并成一个PDF?分享合并PDF文件最简单的方法...
  14. ABB机器人常用指令
  15. 万能五笔-98五笔方案
  16. ajax php 源码,ThinkPHP Ajax 实例源代码_ThinkPHP教程
  17. 云:SD-WAN不断增长的驱动力
  18. odoo13 学习 Actions 动作的定义
  19. 360度全景图像制作
  20. 小i机器人与科天达成战略合作 携手打造智能化未来工厂

热门文章

  1. android不规则背景,Android不规则图像填充颜色小游戏
  2. Github/Gitlab/Gitee徽章生成网站shields.io的使用方法
  3. 红米Note3全网通解锁BL以及刷TWRP
  4. 红米note3支持html,红米Note3支持什么视频格式?支持RMVB播放吗?
  5. Javascript Base64加密与解密
  6. 集束搜索【beam search】
  7. requests利用selenium,代理Ip,云打码,验证码抠图操作 爬取搜狗微信公众号内容
  8. cdn与服务器的关系_域名解析、CDN 加速、服务器绑定域名之间的关系及如何操作?...
  9. Xmas!送你Flutter Animation小星星!
  10. 批量剪裁图片OpenCV(C++)