html2pdf 一键生成pdf实践

背景

项目中需要将查询的图表及表格一键生成pdf，便于运营查看操作

调研

经调研，目前社区有合适的插件实现，html2pdf.js，该插件的实现原理就是将html内容获取，解析，用cavans画出来，生成图片，然后由图片生成pdf文件

使用

html2pdf().from(dom).set({
    margin: 1,
    filename: `${filename}.pdf`,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 1,
      width: dom.offsetWidth
    },
    jsPDF: { unit: 'pc', format: 'a4', orientation: 'portrait', compressPDF: true }
  }).save()

坑

• 不支持第三方字体库
• 生成的pdf因为是图片，所以不支持选中复制
• 部分dom宽度没有满屏
  • 可以采取在执行生成pdf前，动态添加宽度，然后在最后将该宽度去掉

const tableDom: any = document.getElementById('tableRef')
 tableDom.setAttribute('style', `width: ${reportRef.value.offsetWidth}px`)
 ...
  nextTick(() => {
    tableDom.setAttribute('style', 'width: auto')
  })