Vue导出PDF

时间:2021-6-6 作者:qvyue

一. 使用vue-to-pdf

https://www.npmjs.com/package/vue-to-pdf

npm i vue-to-pdf --save

引入:

import vueToPdf from 'vue-to-pdf';
 
Vue.use(vueToPdf);

使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用this.$PDFSave(this.$refs['content'], '我的文件')

打印出的内容
export default { methods: { toPdf() { this.$PDFSave(this.$refs["content"], "我的文件"); }, }, };

其原理是把HTML转化为base64图片, 然后将其转为PDF
所以: 转换后的PDF是图片PDF, 是不能编辑的,而且: 清晰度很一般

Vue导出PDF

二. 直接使用系统打印

我们知道, 我们是可以在浏览器中可以直接打印的,所以我们可以获取浏览器对象,然后调用其打印方法, 调用起系统打印, 再安装个PDF打印机完成打印.

这样做的
优点是:不需要安装任何组件
缺点是: 有可能丢失样式等问题, 尤其是使用了UI框架之后

打印出的内容
export default { methods: { toPdf() { window.open("url").print(); //这一步就是在新窗口调出打印机 }, }, };
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。