jsPDF 如何将HTML和CSS添加到PDF？
226浏览 · 2023-09-22 19:06:42
要将HTML和CSS添加到PDF中，可以使用jsPDF和html2canvas库。下面是一个简单的示例代码：
```javascript
// 引入jsPDF和html2canvas库
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
// 获取需要转换为PDF的HTML元素
const element = document.getElementById('pdf-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('document.pdf');
在上面的代码中，我们首先使用html2canvas将HTML元素转换为canvas，然后将canvas的图片数据添加到新的jsPDF实例中，最后保存PDF文件。请注意，这种方法可能无法完全保留HTML和CSS的样式，但是可以很好地处理简单的HTML和CSS内容。