html转换成pdf格式的两种方式比较?

背景:

项目中有需要将html下载成pdf的需求,我看项目中的实现思路是

  1. 利用html2Canvas库将html转换成图片;
  2. 利用jspdf库将canvas生成的图片转换成pdf格式。

后面发现html2pdf可以直接将html转换成pdf格式
示例代码如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>HTML to PDF conversion</title>
  <script src="./html2pdf.bundle.min.js"></script>

  <script>
    function createPDF () {
      // get the element of ticket content.
      const docElement = document.getElementById('ticket');
      // select the element and save as the PDF.
      html2pdf().from(docElement).save();
    }
  </script>
</head>

<body>
  <h1 style="color:blueviolet">Jiyik Learning</h1>
  <h3>JavaScript create and download pdf</h3>

  <div id="ticket">
    <h1>Our Ticket</h1>
    <p>Ticket content here</p>
  </div>
  <button onclick="createPDF()">Download as PDF</button>
</body>

</html>

html2pdf下载链接:https://www.cdnpkg.com/html2pdf.js/file/html2pdf.bundle.min.js/

例如htnl2pdf好像更简洁,请问下两种方式哪种比较好?

阅读 1.2k
2 个回答

看你的需求,我觉得转 canvas 没什么必要,我以前做的都是直接让用户 cmd+p 调用打印功能,然后布局用 @media print 来写。

jspdf也可以直接生成pdf文件,都差不多,用哪个都可以的

var doc = new jsPDF();
var elementHTML = document.querySelector("");

doc.html(elementHTML, {
    callback: function(doc) {
        doc.save('sample-document.pdf');
    },
    x: 15,
    y: 15,
    width: 170, // 目标PDF文档中的宽度
    windowWidth: 650 // CSS像素中的窗口宽度
});

之前做过批量生成的,是用puppeteer做的,我写过一个demo,输入页面的url,直接 截图

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏