vue html下载导出为PDF

1.写一个js文件

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

function exportPdf(fileName, domName, callback) {
    html2Canvas(document.querySelector("#" + domName), {
        allowTaint: true,
        backgroundColor: "#FFF"
    }).then(function(canvas) {
        console.log("开始生成文档！")
        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(fileName + '.pdf');
        callback('done');
    })
}

export default {
    exportPdf
}

2.引入js文件

import  htmlToPdf from '路径'

3.导出按钮

 // 导出pdf
    exportPDF() {
      document.querySelector(".textNav").style.color = "#1e1e1e";//导出前改变文字颜色

      //exportDom是id名字，导出内容只能放在一个div
      let fileName = `文档名字.pdf`;
      htmlToPdf.exportPdf(fileName, "exportDom", resp => {
        this.fileExportCallBack(resp);
      });

      document.querySelector(".textNav").style.color = "#ccc";//导出后恢复文字颜色
    },