html 生成pdf 有空白页_html2canvas + jspdf 实现 html 转 pdf

可以使用html2canvas和jsPDF库来实现将HTML页面转换为PDF文件。

首先，在HTML文件中引入html2canvas和jsPDF库：

<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>

然后，在JavaScript文件中编写生成PDF的代码：

// 获取HTML元素
var element = document.getElementById("pdf-content");

// 将HTML元素转换为canvas
html2canvas(element).then(function(canvas) {
  // 获取canvas的宽度和高度
  var width = canvas.width;
  var height = canvas.height;

  // 创建PDF对象
  var pdf = new jsPDF('p', 'pt', [width, height]);

  // 将canvas添加到PDF中
  pdf.addImage(canvas, 'PNG', 0, 0, width, height);

  // 保存PDF文件
  pdf.save('file.pdf');
});

在上面的代码中，我们首先获取要转换为PDF的HTML元素，然后使用html2canvas库将其转换为canvas。接着，我们使用jsPDF库创建一个PDF对象，并将canvas添加到PDF中。最后，我们调用PDF的save()方法将其保存为PDF文件。

需要注意的是，如果HTML页面中存在CSS样式，可能会导致生成的PDF文件中存在空白页。这是因为html2canvas只能识别内联样式，对于外部样式表无法处理。所以，我们需要将所有的CSS样式都转换为内联样式，以确保生成的PDF文件中没有空白页。