点击【下载】按钮，如何用html2canvas+jsPDF将当前html页面下载为PDF？

在软件开发的当下环境中，对HTML页面转为PDF格式的需求十分普遍。利用html2canvas和jsPDF这两个实用的工具，我们可以毫不费力地实现单页或连续多页PDF文件的下载。下面，我会一步步向大家演示这一过程的详细步骤。

认识html2canvas

npm install --save html2canvas

html2canvas官方网站明确表示，这是一款专门用于将HTML页面进行渲染的工具。该脚本能够在浏览器内部对页面或页面的一部分进行截图，并且能够解析DOM结构和元素的样式，从而将页面内容转换为图像。随后，生成的图像会被截取并集成到页面中。但是，需要留意的是，由于浏览器的功能限制，HTML的元素有高度限制，可参考MDN上最大画布尺寸。

html2canvas(document.body}).then(function(canvas) {
    document.body.appendChild(canvas);
});

了解jsPDF

jsPDF文档提供了详细的指导。该工具能够在浏览器中创建PDF文件。安装jsPDF的操作相对简单，它的API设计清晰且易于理解。另外，它还提供了制作文本和图片PDF的示例。然而，需要注意的是，jsPDF生成的PDF默认使用pt作为单位，单页的最大高度一般被限制在14400pt。若文件高度超过这一限制，生成的PDF文件可能无法正确显示；情况更糟的话，甚至可能引发浏览器运行故障。

npm install jspdf --save

单页下载（自适应纸）

以html2canvas生成的图像大小为依据，确定PDF文档的页面宽度和高度，以此达到单页下载的目的。这样的处理方式使得PDF页面能够自动调整以适应图像尺寸。如果页面内容较少，使用这种单页自适应的下载方法既方便又快捷，确保所有内容都能在一个页面中完整展示。

// jsPDF 下载文本图片PDF
const downLoadPdf = () => {
  // 三个参数，第一个方向，第二个单位，第三个尺寸 'a4' = [595.28,841.89]
  const doc = new jsPDF('', 'pt', [500, 1000])
  // 字体大小
  doc.setFontSize(50)
  // 文本，左边距，上边距
  doc.text('Hello world!', 10, 50)
  // base64，图片类型，左边距，上边距，宽度，高度
  doc.addImage(base64, 'PNG', 10, 60, 400, 200)
  doc.save('a4.pdf')
}

单页下载（A4纸）

A4纸的宽度为595.28pt，高度为841.89pt。根据这些尺寸数据，我们可以计算出图像在A4纸上占据的总高度。如果页面内容比较丰富，那么在将其单独保存为PDF格式时，可能会出现单页内容过于冗长的情形。此外，这种PDF文档的尺寸可能超出jsPDF规定的单页最大高度（例如32767像素），因此生成的PDF文件可能显示为空白，或者html2canvas转换过程可能失败。

const downLoadPdfAutoSingle = () => {
  html2canvas(document.body, {
    scale: window.devicePixelRatio * 2, // 使用设备的像素比 * 2
  }).then(canvas => {
    // 返回图片dataURL，参数：图片格式和清晰度(0-1)
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    const pageWidth = canvas.width
    const pageHeight =  canvas.height

    const orientation = canvas.height >= canvas.width ? 'portrait' : 'landscape'  // portrait 表示纵向，landscape表示横向
    const pdf = new jsPDF(orientation, 'pt', [pageWidth, pageHeight])
    
    // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
    pdf.addImage(
      pageData,
      'JPEG',
      0,
      0,
      pageWidth,
      pageHeight
    )
    pdf.save('下载一页PDF（自适应纸）.pdf')
  })
}

我们将PDF单页的宽度与html2canvas生成的图像宽度保持一致，并将高度设置为图像宽度的1.3倍。通过这样的调整，在下载包含多页内容时，页面尺寸能够根据图像的实际尺寸进行灵活调整。一旦页面内容的长度达到特定标准，便可以启用多页自适应的下载模式，并将其转换成PDF文件。

因为jsPDF对单页PDF的高度有限制，又或者是我们的需求所导致，我们不得不去研发自动分页的功能。我们给每一页PDF定制的尺寸是A4标准，也就是宽度为595.28pt，高度为841.89pt。在分页过程中，我们选择每页展示一张图片，并且需要对图片的放置位置进行精确计算，确保每页上展示的图片分布在不同的区域。我们可以通过调用jsPDF库里的pdf.addPage()函数，来为PDF文档添加新的页面。

在使用html2canvas和jsPDF技术将网页内容转换为PDF文件的过程中，你是否遇到了一些难以解决的难题？如果这篇文章能够给你带来一些灵感，请记得点赞并支持，同时也不妨将它分享给更多的人！

const downLoadPdfA4Single = () => {
  html2canvas(document.body).then(canvas => {
    // 返回图片dataURL，参数：图片格式和清晰度(0-1)
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    // 方向纵向，尺寸ponits，纸张格式 a4 即 [595.28, 841.89]
    const A4Width = 595.28
    const A4Height = 841.89 // A4纸宽
    const pageHeight = A4Height >= A4Width * canvas.height / canvas.width ? A4Height :  A4Width * canvas.height / canvas.width
    const pdf = new jsPDF('portrait', 'pt', [A4Width, pageHeight])
    
    // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
    pdf.addImage(
      pageData,
      'JPEG',
      0,
      0,
      A4Width,
      A4Width * canvas.height / canvas.width,
    )
    pdf.save('下载一页PDF（A4纸）.pdf')
  })
}