前端如何把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元素不设置固定高度,让它让内部的内容撑起高度
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容