【vue】实现指定区域打印功能

您所在的位置：网站首页 › 如何打印网页中的部分内容文件 › 【vue】实现指定区域打印功能

【vue】实现指定区域打印功能

2024-01-01 00:21| 来源: 网络整理| 查看: 265

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

在最近的项目中需要打印页面中的指定区域，接触到了两个比较好用的打印插件：vue-print-nb和print.js，我在项目中使用的是 vue-print-nb 这个插件

需求——打印页面中的指定区域

插件一：vue-print-nb 1. 下包 npm install vue-print-nb --save 2. 全局注册

在 mian.js 中全局注册可以在整个项目中使用

import Print from 'vue-print-nb' Vue.use(Print); //注册 3. 使用

这里的需求是只打印指定区域，第一步是给要打印的区域使用 id="printAre" div包裹起来（这个id名是随便取的），第二步给打印按钮绑定v-print="printAre"，最后在data中写打印设置，id: "printAre" 为必填项。下面的代码可以直接复制到.vue文件夹中

kooriookami 18100000000 苏州市学校江苏省苏州市吴中区吴中大道 1188 号打印 export default { methods: { deleteRow(index, rows) { rows.splice(index, 1); } }, data() { return { // 打印设置 printAre: { id: "printAre", popTitle: "页眉部分", extraHead: '', }, tableData: [{ date: '2016-05-03', name: '王小虎', age: 18, gender: '男', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, ...... { date: '2016-05-07', name: '王小虎', age: 18, gender: '男', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } .el-card{ width: 1200px; } 在网上查资料的时候看见有小伙伴说在使用这个插件时会出现以下两个问题，所以在有以下需求时建议使用print.js，其他时间使用vue-print-nb 需要打印本地图片时显示不全无法打印 form 表单插件二：print.js 1. 下包 npm install print-js --save 2. 在需要的页面引入 import printJS from 'print-js' 3. 使用

参考Print.js官网

// 用div包裹打印起源于要打印区域 // 按钮绑定点击事件打印 handlePrint() { printJS({ printable: printAre, // 'printFrom', // 标签元素id type: 'html', targetStyles: ['*'], }) } 总结：以上两个插件在打印时会出现显示不全的问题，我的解决办法是在打印预览时，更多设置里面修改成自定义的缩放比

【本文地址】

【vue】实现指定区域打印功能

【vue】实现指定区域打印功能

今日新闻

推荐新闻