前端PDF导出，使用html2Canvas和jsPDF插件

最新推荐文章于 2023-11-16 08:53:39 发布

枫沂

最新推荐文章于 2023-11-16 08:53:39 发布

阅读量1.2k

点赞数

文章标签：前端 pdf

本文链接：https://blog.csdn.net/qq_42556623/article/details/132041333

版权

文章介绍了如何在JavaScript中利用html2canvas库将网页内容转换为canvas，然后通过jsPDF生成PDF文件，提供了一个downloadPDF函数实现这个功能并支持自定义PDF名称。

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

import html2Canvas from "html2canvas";
import jsPDF from "jspdf";
export function downloadPDF(dom, filename) {
  const scale = 2;
  window.pageYOffset = 0;
  // 滚动到顶部，避免打印不全
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  html2Canvas(dom, {
    allowTaint: true, 
    scale, 
  }).then((canvas) => {
    console.log("canvas", canvas);
    const contentWidth = canvas.width / scale;
    const contentHeight = canvas.height / scale;
    const pdf = new jsPDF("", "pt", [contentWidth, contentHeight]);
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
    pdf.save(`${filename}.pdf`);
  });
}