背景:
项目中有需要将html下载成pdf的需求,我看项目中的实现思路是
- 利用html2Canvas库将html转换成图片;
- 利用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好像更简洁,请问下两种方式哪种比较好?
看你的需求,我觉得转 canvas 没什么必要,我以前做的都是直接让用户 cmd+p 调用打印功能,然后布局用
@media print
来写。