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

convert web page to a pdf with styles

本文关键字：样式 pdf 网页 转换      更新时间：2023-09-26

我想将网页转换为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");
    }
  });
}

谢谢！

可能有一些因素在起作用。

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

看看这是否能给你更好的图像质量。

相关文章：