首页原生js 不使用第三方库将节点打印为pdf或图片

原生js 不使用第三方库将节点打印为pdf或图片

时间: 2024-01-22 07:21:09 浏览: 125

可以使用 `html2canvas` 库将 HTML 节点转换成 Canvas，然后再使用 `jsPDF` 库将 Canvas 转换成 PDF。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>HTML节点转PDF</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script> </head> <body> <div id="content"> <h1>Hello World!</h1> <p>This is a sample text.</p> <img src="https://picsum.photos/200/300" alt="Random Image"> </div> <button onclick="generatePDF()">生成PDF</button> <script> function generatePDF() { const content = document.getElementById("content"); html2canvas(content).then(canvas => { const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF(); pdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight()); pdf.save("content.pdf"); }); } </script> </body> </html> ``` 这个示例将页面中的 `div` 节点（id 为 "content"）转换成 Canvas，然后将 Canvas 转换成 PDF 并保存到本地。你可以根据实际需求修改节点的选择器和保存的文件名。

阅读全文