原生js 将节点打印为pdf或图片
时间: 2023-11-25 07:06:31 浏览: 81
可以使用 `html2canvas` 和 `jsPDF` 两个库分别将节点转化为图片和生成 PDF 文件。具体步骤如下:
1. 引入 `html2canvas` 和 `jsPDF` 库:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
```
2. 编写 JavaScript 代码:
```javascript
// 获取需要转化的节点
var node = document.getElementById('node-id');
// 将节点转化为图片
html2canvas(node, {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
// 生成 PDF 文件
var pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(imgData, 'PNG', 0, 0, 211, 298);
pdf.save('file.pdf');
}
});
```
其中,`node-id` 是需要转化为 PDF 或图片的节点的 ID,`pdf.save('file.pdf')` 可以将生成的 PDF 文件保存到本地,并命名为 `file.pdf`。
需要注意的是,`html2canvas` 和 `jsPDF` 库在处理复杂节点时可能存在兼容性问题,需要进行适当的调试和处理。
阅读全文