js实现html转pdf并下载

最新推荐文章于 2024-07-22 15:57:13 发布

lixue7921

最新推荐文章于 2024-07-22 15:57:13 发布

阅读量1.2k

点赞数

文章标签： javascript html pdf

本文链接：https://blog.csdn.net/lixue7921/article/details/131132662

版权

该代码示例展示了如何结合jsPDF和html2canvas库，将包含文本和列表的HTML内容转换成Canvas，进一步转化为PDF文件，并提供下载功能。用户点击按钮后，页面中的指定HTML元素会被转换并保存为名为test.pdf的PDF文档。

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

要实现将 HTML 转换为 PDF 并下载需要使用 jsPDF 和 html2canvas 库。以下是一个示例代码，它将 HTML 元素（id为content）转换为 PDF 并下载：

<!-- html -->
<div id="content">
  <h1>Hello, World!</h1>
  <p>This is a test page.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<button onclick="generatePDF()">Download PDF</button>

// javascript
function generatePDF() {
  // 获取要转换为 PDF 的 HTML 元素
  const element = document.getElementById("content");

  // 使用html2canvas将 HTML 元素转换为 Canvas
  html2canvas(element).then(canvas => {
    // 获取Canvas的图像数据
    const imgData = canvas.toDataURL('image/png');

    // 创建一个新的 jsPDF 实例
    const pdf = new jsPDF();

    // 将Canvas转换为PDF
    pdf.addImage(imgData, 'PNG', 0, 0);

    // 下载PDF文件
    pdf.save("test.pdf");
  });
}

以上代码会在按钮被点击时触发，将 HTML 元素转换为 Canvas，然后将 Canvas 转换为 PDF 并下载。