js 页面导出PDF文件

最新推荐文章于 2024-07-25 16:31:45 发布

stpzhf

最新推荐文章于 2024-07-25 16:31:45 发布

阅读量873

点赞数 2

文章标签： javascript pdf 开发语言前端

本文链接：https://blog.csdn.net/stpzhf/article/details/133858612

版权

本文介绍了如何在JavaScript中通过npminstall插件安装html2canvas和jspdf库，实现将HTML页面转换为PDF的功能，并详细展示了代码示例，包括CSS样式对生成PDF的影响。

摘要由CSDN通过智能技术生成

一、安装插件？

npm install --save html2canvas  // 页面转图片
npm install jspdf --save  // 图片转pdf

二、直接使用代码

1.引入库

代码如下（示例）：

exportPdf(el,  title) {
    html2canvas(el, {
      useCORS: true,
      allowTaint: true,
      dpi: 192,//导出pdf清晰度
      scale:2,
    })
    .then((canvas) => {
    // 内容的宽度
    const contentWidth = canvas.width;
    // 内容高度
    const contentHeight = canvas.height;
    // 一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
    const pageHeight = (contentWidth / 592.28) * 841.89;
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight;
    // 页面偏移
    let position = 0;
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = (592.28 / contentWidth) * contentHeight;
    // canvas转图片数据
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    // 新建JsPDF对象
    const 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(title + ".pdf");
    })
    .catch((e) => {console.log(e)})
    .finally(() => {
    });
}