vue如何把网页转为pdf,jsPDF的使用

步骤 1: 安装jsPDF

通过npm安装

npm install jspdf

js引入使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

步骤 2: 使用jsPDF生成PDF

import jsPDF from "jspdf";
this.screenshotPdf = new jsPDF("p", "pt");
let page = document.querySelector("#page1");
html2canvas(
page,{
    elements: page,
    x: 0, y: 0, width: 1060, height: 1504,
    useCORS: false,
    scale: 2,
    imageTimeout: 0,
    logging: false,
    ignoreElements: e => {
        if ( e.contains(page) || page.contains(e) || e.tagName === 'STYLE' || e.tagName === 'LINK' || e.getAttribute('data-html2canvas') != null // header里面的样式不能筛掉) {
            return false;
        }
            return true;
        }
}).then(function(canvas) {
    let image = canvas.toDataURL('image/jpeg', 1.0);
    this.screenshotPdf.addImage(image, 'JPEG', 0, 0, 595.28, 841.89);
 });

步骤 3: 将PDF保存为Blob并创建URL

// 直接下载文件
this.screenshotPdf.save("报告.pdf");
// 转为本地blob临时访问链接
const pdfOutput = doc.output('arraybuffer');
const pdfBlob = new Blob([pdfOutput], { type: 'application/pdf' });
const pdfUrl = URL.createObjectURL(pdfBlob);