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’)

// 导出页面为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('#pdfDom'), {
                allowTaint: true,
                taintTest: false,
                useCORS: true,
                //width:960,
                //height:5072,
                dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
                scale: 4 //按比例增加分辨率 
            }).then(function (canvas) {
                let contentWidth = canvas.width
                let contentHeight = canvas.height
                let pageHeight = contentWidth / 592.28 * 841.89
                let leftHeight = contentHeight
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg', 1.0)
                let PDF = new JsPDF('', 'pt', 'a4')
                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                            PDF.addPage()
                        }
                    }
                }
                PDF.save(title + '.pdf')
            }
            )
        }
    }
}

3、在main.js中使用我们定义的函数文件

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在需要的导出的页面…调用我们的getPdf方法即可

HTML:

//给自己需要导出的html部分.定义id为"pdfDom".此部分将会是pdf显示的部分
<div id="pdfDom"></div>

<el-button @click="getPdf()">导出PDF</el-button>

js:

export default {
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'
      }
   }
 }

给大家看一下我导出PDF格式的效果图