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