一文搞定前端html内容转图片、pdf和word等文件

正在加载今日诗词....

2023-04-09

接上篇富文本编辑器 html 内容转 word：html-docs-js 避坑指南，我们已经完成了 html 内容转 word 文档的> 需求，接着咱们看下图片和 pdf 的处理。

介绍下用到的库

html2canvas

图片和 pdf 的转换都会用到html2canvas来完成，通过官网上的介绍，我们可以总结一下它的特点：

不需要后台支持，通过纯浏览器端”截图“；
可对部分或整个网页进行“截图”；
基于 DOM（遍历页面的 DOM），利用可用的信息构建屏幕截图；
有些 css 属性未被支持，可查看支持的 css 属性列表；
受同源策略影响；
无法渲染 iframe，flash 等内容。

jsPDF

pdf 的转换用到jsPDF，可以看看这个demo，对 jsPDF 的介绍比较详细。

图片的转换

相比于 html 转 word 来说，图片和 pdf 的转换相对来说简单了许多，咱们来看下图片的转换过程，主要有以下几个步骤：

克隆需要截图的 DOM 元素
通过cloneNode将需要克隆的节点生成一份副本，这一步的目的是：我们不能直接对原始 DOM 进行操作，因为会影响页面布局。所以可以修改克隆后的 DOM 节点，通过修改节点的样式（border、box-shadow 等）或修改节点宽高，达到我们想要的截图效果。
```
const cloneEle = ele.cloneNode(true)
// 对克隆的节点进行操作
cloneEle.style.xxx = ''
```

通过 html2canvas 截图

我们将第一步克隆到的 DOM 进行一个清理的动作，清理的作用是：移除不需要截图的 DOM 节点；将克隆的节点添加到 DOM 上，并返回新节点和删除节点的方法。删除节点cleanHtmlRecover方法用于在截图完成后移除 DOM 元素。

接着使用 html2canvas 方法将 DOM 绘制为 canvas，通过调用 canvas 对象的 toDataURL 方法将 canvas 转换成图片。

这里需要为 html2canvas 提供第二个参数useCORS: true，开启使用 CORS 从服务器加载图像，不然如果图片不同源时就会导致一片白。更多参数配置请参考configuration。

const cleanHtml = (ele: HTMLElement) => {
 // 移除不需要截图的DOM节点
 const selectElements = ele.querySelectorAll('select')
 selectElements.forEach((sel) => (sel.style.display = 'none'))
 const title = document.createElement('div')

 const warp = document.createElement('div')
 // 图片、pdf导出背景色不是白色
 warp.style.position = 'absolute'
 warp.style.zIndex = '-1'
 warp.append(ele)
 document.body.append(warp)
 return {
   warp,
   cleanHtmlRecover: () => {
     warp.remove()
   }
 }
}
const { warp, cleanHtmlRecover } = cleanHtml(cloneEle)
return new Promise<void>((resolve) => {
 Html2canvas(warp, { useCORS: true })
   .then((canvas) => {
     // 生成截图
     const image = canvas.toDataURL('image/jpg')
     // 下载图片
   })
   .finally(() => {
     cleanHtmlRecover()
     resolve()
   })
})

下载图片
上一步获取到转换后的图片后，就可以通过a标签的方式来下载图片，我们可以通过 dispatchEvent 来模拟点击事件完成下载。对 dispatchEvent 的其他使用可以看这篇文章。
```
// 下载图片
const a = document.createElement('a')
a.download = filename
a.href = canvas.toDataURL('image/jpg')
const event = new MouseEvent('click')
a.dispatchEvent(event)
```

pdf 的转换

图片的导出已经完成，那么 pdf 的导出应该如何做呢？

一开始我们是用的html2pdf-jspdf2，它就是使用 html2canvas 和 jsPDF 结合在一起，通过和 html2canvas 将 html 内容转为 canvas，再通过 jsPDF 将 canvas 转为 pdf。说几个我遇到的问题（可能是我用的不对）：

在 JSPDF 中我设置了format: 'a4'，意思是使用 pdf 来导出，页面同样设置为 a4，但导出的 pdf 文件宽度显示不全；
我们页面可以设置成 A3、A4、A5 几种特定纸张，并且支持设置宽高自定义纸张，但当我传入宽高后，发现得到的 pdf 文件不是我设置好的宽高；
没有了，直接换库跑路 😄

遇到问题解决不了怎么办？找 leader，找 leader，还是找 leader

通过我们一阵商量，最终确定了一个方案：先用 html2canvas 将 html 转换为图片，再利用 jsPDF 提供的addImage方法将图片贴到 pdf 中，因为图片导出目前是没有什么问题，而且展示效果也挺好，所以导出的 pdf 应该也不会有什么问题。

接下来就是和产品掰头环节，巴拉巴拉...，成功让他们改了需求。

最后看下实现过程：

html2canvas 的使用与前面生成图片一样，接着通过generatePDF生成 pdf。

...
Html2canvas(warp, { useCORS: true })
  .then((canvas) => generatePDF(canvas, filename))
...

我们看下generatePDF的实现步骤：

计算一页 A4 纸能显示当前 html 生成的 canvas 高度；
如果 canvas 的高度未超过一页 A4 纸的显示高度，无需分页，直接贴图导出；
否则需要分页打印，分页打印思路如下：
1. 设置变量leftHeight记录剩余高度，打印完一页后 leftHeight 减去已经打印的 canvas 的高度 pageHeight，如果剩余高度大于 0，说明没打印完，通过addPage()增加分页继续打印；
2. 设置变量position记录打印开始的距离头部的位置，打印完一页后 position 增加一页 A4 纸的高度继续打印。

最后贴上完整代码：

/** a4纸的尺寸 */
enum A4_PAPER_SIZE_ENUM {
  'width' = 595.28,
  'height' = 841.89,
}
const generatePDF = (canvas: HTMLCanvasElement, filename: string) => {
  const contentWidth = canvas.width
  const contentHeight = canvas.height
  // 一页pdf显示html页面生成的canvas高度
  const pageHeight =
    (contentWidth / A4_PAPER_SIZE_ENUM.width) * A4_PAPER_SIZE_ENUM.height
  // 未生成pdf的html页面高度
  let leftHeight = contentHeight
  // 页面偏移
  let position = 0
  const imgWidth = A4_PAPER_SIZE_ENUM.width
  const imgHeight = (A4_PAPER_SIZE_ENUM.width / contentWidth) * contentHeight
  const pageData = canvas.toDataURL('image/jpeg', 1.0)
  const PDF = new JsPDF('p', 'pt', 'a4')

  // 当内容未超过pdf一页显示的范围，无需分页
  if (leftHeight < pageHeight) {
    // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
  } else {
    // 超过一页时，分页打印（每页高度841.89）
    while (leftHeight > 0) {
      PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
      leftHeight -= pageHeight
      position -= A4_PAPER_SIZE_ENUM.height
      if (leftHeight > 0) {
        PDF.addPage()
      }
    }
  }
  PDF.save(filename + '.pdf')
}

解决 pdf 导出画面不清晰

html2canvas 的 scale 是用于控制渲染的比例，默认为浏览器的设备像素比即 window.devicePixelRatio。如果导出 pdf 文档觉得模糊时，设置 html2canvas 的 scale 参数为window.devicePixelRatio \* 2，对 canvas 进行等比放大，可以使 canvas 生成的图片更清晰，同时导出的文件大小也会同步增加。

小瑕疵

这种方法有一点点小问题：分页的地方处理不太好，不会自动识别隔页处理，而只是比较粗暴的从中间被拆分，类似下面这张图。

总结

不管是工作还是学习中，都要有良好的“小记”习惯，将遇到的问题、解决的过程记录下来，最后整理成文，积累沉淀，不仅锻炼自己的文笔，同时拓宽知识面、帮助他人，在以后工作中遇到时也能更快的解决问题，实现业务需求；而不是做完就停滞了，下次遇到同样的问题还是处理不了。

以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏 🙏，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

# 介绍下用到的库

# html2canvas

# jsPDF

# 图片的转换

# pdf 的转换

# 解决 pdf 导出画面不清晰

# 小瑕疵

# 总结