将网页转换为带有样式的 pdf

Question

我想将网页转换为 PDF，包括我添加的所有样式。我用过 jspdf.js 和 html2Canvas。但我只得到一张 PDF 格式的模糊图片。我搜索了很多 JavaScript 个代码，但没有找到正确的代码。

我写的脚本是：

function getPDF() {
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var img = canvas.toDataURL("Image/jpeg");
      //window.open(img);
      var doc = new jsPDF({
        unit: 'px',
        format: 'a4'
      });
      doc.addImage(img, 'JPEG', 0, 0, 440, 627);
      doc.save("download");

    }
  });
}

谢谢！

Answer 1

可能有一些贡献。

缺少 canvas.toDataURL 的编码器选项，因此您使用的是默认值。默认值可能会创建低质量的图像。试试这个以获得最高质量的 JPEG 图片：

var img = canvas.toDataURL("Image/jpeg", 1.0);

您也可以尝试使用测量而不是像素创建 jsPDF 对象：

var pdf = new jsPDF("p", "mm", "a4");  // jsPDF(orientation, units, format)

添加图像时，将其缩放到页面尺寸：

pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277);  // 190x277 mm @ (10,10)mm

看看这是否会给您带来更好的图像质量。

将网页转换为带有样式的 pdf

convert web page to a pdf with styles

html

javascript

pdf

html2canvas

jspdf