vue 网页打印(vue打印功能实现的两种方法总结)
类别:编程学习 浏览量:143
时间:2021-10-26 11:56:50 vue 网页打印
vue打印功能实现的两种方法总结第一种方法:通过npm 安装插件
1,安装 npm install vue-print-nb --save
2,引入 安装好以后在main.js文件中引入
import Print from 'vue-print-nb' Vue.use(Print); //注册
3,现在就可以使用了
<li id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </li> <button v-print="'#printTest'">打印</button>
4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill 为链接地址。
5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。
第二种方法:手动下载插件到本地
插件地址:
https://github.com/xyl66/vuePlugs_printjs
1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下
import Print from '@/plugs/print' Vue.use(Print) // 注册 <template> <section ref="print"> 打印内容 <li class="no-print">不要打印我</li> </section> </template> this.$print(this.$refs.print) // 使用
2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
3.指定不打印区域
方法1. 添加no-print样式类
<li class="no-print">不要打印我</li>
方法2. 自定义类名
<li class="do-not-print-me-xxx">不要打印我</li>this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
批量打印
批量打印这里用的其实就是纯js的写法,直接上代码吧:
<template> <li> <ul class="print-ul"> <li v-for="(item,index) of tableData" :key="index" :id="'printli' + index" style="page-break-after:always;"> <li> <p>{{item.date}}</p> <p>{{item.name}}</p> <p>{{item.province}}</p> <p>{{item.city}}</p> <p>{{item.address}}</p> <p>{{item.zip}}</p> </li> </li> </ul> <li @click="handlePrint">打印</li> </li> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-07', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } }, methods: { handlePrint() { var newWin = window.open(""); //新打开一个空窗口 for (var i = 0; i < this.tableData.length; i++) { var imageToPrint = document.getElementById("printli" + i); //获取需要打印的内容 newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口 } const styleSheet = `<style>li{list-style:none}</style>`; newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式 newWin.document.close(); //在IE浏览器中使用必须添加这一句 newWin.focus(); //在IE浏览器中使用必须添加这一句 setTimeout(function() { newWin.print(); //打印 newWin.close(); //关闭窗口 }, 100); } } } </script> <style> .print-ul { width: 600px; list-style: none; border: 1px solid #e8e8e8; } </style>
总结
到此这篇关于vue打印功能实现的文章就介绍到这了,更多相关vue打印功能内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue手动清除keepalive缓存(vue中keep-alive组件的用法示例)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
热门推荐
- docker无法访问宿主机ip(解决Mac下 docker 无法 ping 通宿主机的问题)
- html语法规范解释(浅析HTML5 Landmark)
- select top 根据传入的参数获取数据的条数
- laravel线上如何调试(解决Laravel 不能创建 migration 的问题)
- 服务器怎么用虚拟内存(windows云服务器提示虚拟内存不足的解决方案)
- css样式退出效果(纯css实现选中切换效果的示例)
- css的position属性的属性值(浅谈CSS中的 object-fit 与 object-position的使用)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- linux启动jenkins(linux 下jenkins项目搭建过程centos7为例 )
- 浏览器怎么显示javascript页面(JavaScript如何通过userAgent判断几个常用浏览器详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9