js实现导出pdf文件

1、引入html2canvas.min.js和jspdf.min.js文件

2、导出pdf事件具体代码
//先找到要导出表格的父元素:right-aside,其他啥也不用改了，点击按钮调用这个方法就可以了
var target = document.getElementsByClassName("statiscon_new1")[0];
target.style.background = "#FFFFFF";
setTimeout(() => {
html2canvas(target, {
scale: 2,
}).then(function (canvas) {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');

    // A4纸的尺寸为210mm x 297mm
    const imgWidth = 190; // 图片宽度，留出边距
    const pageHeight = 297; // PDF页面高度
    const imgHeight = (canvas.height * imgWidth) / canvas.width; // 根据宽度计算高度
    let heightLeft = imgHeight;

    let position = 0;

    // 处理分页
    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight); // 左右各留10mm边距
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight); // 左右各留10mm边距
        heightLeft -= pageHeight;
    }
    pdf.save("文件名.pdf");
    //$(".statiscon_new").css("height","20px");
});

}, 100);
3、把mm换算为像素的写法
$(".statiscon_new").css("height","100%");
$(".statiscon_new1").css("height","100%");

//先找到要导出表格的父元素:right-aside,其他啥也不用改了，点击按钮调用这个方法就可以了
var target = document.getElementsByClassName("statiscon_new1")[0];
target.style.background = "#FFFFFF";
setTimeout(() => {
html2canvas(target, {
scale: 5,
}).then(function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pageHeight = contentWidth / 595 * 841.89;
var leftHeight = contentHeight;
var position = 0;
var imgWidth = 595;
var imgHeight = 595 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var 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("中原e购平台供应商价格谈判记录表_"+getNowFormatDate()+".pdf");
    $(".statiscon_new").css("height","20px");
});

}, 100);
4、为了让页面导出的pdf内容居中显示，导出元素的div需要有一些样式设置

以上代码如果浏览器放大，导出的pdf清晰度有待优化