supply-front/src/utils/pdf.js

import html2canvas from 'html2canvas'

import jsPDF from 'jspdf'

export const downloadPDF = page => {
  html2canvas(page).then(function (canvas) {
    canvas2PDF(canvas)
  })
}

const canvas2PDF = canvas => {
  let contentWidth = canvas.width

  let contentHeight = canvas.height

  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

  let imgWidth = 595.28

  let imgHeight = (592.28 / contentWidth) * contentHeight

  //let imgHeight = 700/contentWidth * contentHeight;

  //一页pdf显示html页面生成的canvas高度;

  var pageHeight = (contentWidth / 592.28) * 841.89

  let totalHeight = contentHeight

  // 第一个参数： l：横向  p：纵向

  // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）

  let pdf = new jsPDF('p', 'pt')

  let position = 0

  //   pdf.addImage(

  //     canvas.toDataURL("image/jpeg", 1.0),

  //     "JPEG",

  //     0,

  //     0,

  //     imgWidth,

  //     imgHeight

  //   );

  if (totalHeight < pageHeight) {
    pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, imgWidth, imgHeight)
  } else {
    while (totalHeight > 0) {
      pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, imgWidth, imgHeight)

      totalHeight -= pageHeight

      position -= 841.89

      //避免添加空白页

      if (totalHeight > 0) {
        pdf.addPage()
      }
    }
  }

  // pdf.addImage(

  //     canvas.toDataURL("image/jpeg", 1.0),

  //     "JPEG",

  //     0,

  //     position,

  //     imgWidth,

  //     imgHeight

  // );

  pdf.save('导出.pdf')
}