vue之如何实现打印功能
作者：Cherry☼
这篇文章主要介绍了vue之如何实现打印功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
这里用的是 vuePlugs_printjs
- 首先打开 git项目地址
- 然后将 print.js 下载到本地放入项目文件夹，使用方法如下：
//1.首先在main.js引入
import Print from './utils/print.js'
Vue.use(Print)
//2.在页面使用
<div ref=print>打印内容<div/>
//3.其次在你用到的地方触发这个方法即可
handleprinter() {
this.$print(this.$refs.print);
}
当然也可以参考官方的是使用方法：
vue打印插件 使用方法
import Print from '@/plugs/print' Vue.use(Print) // 注册 <template> <section ref="print"> 打印内容 <div class="no-print">不要打印我</div> </section> </template> this.$print(this.$refs.print) // 使用
注意事项：
需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空 指定不打印区域
// 方法一. 添加no-print样式类
<div class="no-print">不要打印我</div>
// 方法二. 自定义类名
<div class="do-not-print-me-xxx">不要打印我</div>
// 使用
this.$print(this.$refs.print,{'noPrint':'.do-not-print-me-xxx'})
假设会出现打印不全的问题，可以通过缩放来进行设置，数值越小，缩放的越小。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。