html2canvas+pdf

// utils/htmlToPdf.js：导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

export default function html2CanvasPDF(elementName:string, opts:any){
    const dom = document.querySelector(elementName)
    if(!dom)return
    console.dir(dom);
    html2Canvas(dom, opts).then((canvas) => {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);

        // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
        let PDF = new JsPDF("", "pt", "a4");

        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
            PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
            // 超过一页时，分页打印（每页高度841.89）
            while (leftHeight > 0) {
                PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                    PDF.addPage();
                }
            }
        }
        PDF.save(`${Date.now()}` + ".pdf");
    })
    .catch((error) => {
        console.log("打印失败", error);
    });


}