前端如何把html结构下载到本地并保存成pdf文件格式

/**
*  element 需要下载的dom节点(传dom节点的id)
*  pdfTitle 下载到本地pdf文件的文件名
*/
const downloadPdf =  (element, pdfTitle) => {
      const el = document.querySelector(element)
      html2Canvas(el, {
        allowTaint: true,
        tainTest: false
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
       // 592.28 A4 纸的宽度
      //  841.89 A4纸的长度
        const pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
       // PDF 参数可参考文档
        const PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
         // 如果页面长度超出a4 的长度, 就分页
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(pdfTitle + '.pdf')
      }
      )
    }
  }

// 调用
downloadPdf('#domNode',   '下载pdf')

遇到问题:

  1. 截取的图片没有超出滚动的部分
    问题: 需要下载的dom元素节点设置了固定高度并且设置了overflow: hidden
    解决: 需要下载的dom元素不设置固定高度,让它让内部的内容撑起高度

你可能感兴趣的:(前端如何把html结构下载到本地并保存成pdf文件格式)