Vue导出页面为PDF格式高清(亲测有效)

通过在网上查阅资料,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF…
做个整理总结,如果也你实现了请留下你点赞的小手

1 、首先我们要安装两个包.分别是:

注意:

• 如果npm下载较慢,建议可以考虑换成cnpm下载
• 下载完这两个包之后项目有可能会报错,不要慌张,如果英语不好看不懂,复制到百度,就会解决(我当时报错的内容是Module build failed: Error: ENOENT: no such file or directory, scandir...,就是要重新安装一下sass,解决办法运行npm rebuild node-sass就好了)

//第一个.将页面html转换成图片
npm install --save html2canvas 
//第二个.将图片生成pdf
npm install jspdf --save

2、定义全局函数…创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/utils/htmlToPdf.js’)

以下内容可直接复制到项目中:

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
   
   
    install(Vue, options) {
   
   
        Vue.prototype.getPdf = function () {
   
   
            var title = this.htmlTitle  //DPF标题
            html2Canvas(document.querySelector