vue 使用print-js_vue print.js

前言

只要有软件的开发就会有管理后台的开发，然而就现在很多管理后台都是需要打印功能的，其实也有那种前端生成pdf的需求，但总的来说，个人还是觉得用打印里面的“另存为PDF”比较香。

我这里使用的是print-js，官网

• 优点：可打印多种格式内容（pdf、json、html、image），默认类型为pdf。打印json时可以添加表头。打印html页时可以继承原有页面的样式，可以局部打印，过滤掉要打印的元素。

那么打印怎么实现呢？请接着往下看

安装

npm install print-js --save
1

引入

在main.js文件里面引入

import Print from 'vue-printjs'

Vue.use(Print)
1
2
3

使用

我这里是简单的举例，就没有写样式，如果需要不被打印，那么就在元素上加上no-print的类就可以啦！

<div ref="print">
	<p>需要打印的内容</p>
	<p class="no-print">不需要被打印</p>
</div>
 <el-button size="small" type="primary" class="btn" @click="print">打印</el-button>
1
2
3
4
5

 // 打印
  print() {
      this.$print(this.$refs.form)
  },
1
2
3
4

我这是最简单的用法了，官方介绍更全哦，可以去官网看看更多使用类型个方法