前端导出word文件—包含canvas(echarts图表)

一、使用的插件

html-docx-js

二、整体思路

因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。

三、实现

1. 先克隆要下载的DOM的副本。
2. 因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM。
3. 将DOM副本传入插件，生成文件对象，并下载下来。

import htmlDocx from 'html-docx-js/dist/html-docx'
 /*
 步骤1 ：因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的），
 所以先克隆再在克隆的dom上进行操作是不可取的。所以需要在原DOM上生成img，
 设置display: none从而使图片不影响页面展示，并插入到对应canvas元素之前（为了保证顺序不变）。
 */
  const app = document.getElementById('app')
  const cloneApp = app.cloneNode(true)
  const canvases = app.getElementsByTagName('canvas')
  const cloneCanvases = cloneApp.getElementsByTagName('canvas')
  <