插件-将网页导出成pdf html2canvas、jspdf

1、安装依赖

npm install html2canvas
npm install jspdf

2、引入

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

3、书写事件函数

getPdf () {
    html2Canvas(document.querySelector('#printDom'), { //导出的html元素
        allowTaint: true
    }).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('pdf文件名' + '.pdf');
    })
}

4、调用事件函数

<el-button @click="getPdf">保存为PDF</el-button>