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

Liuer_Qin

已于 2022-06-08 17:01:55 修改

阅读量2.7k

点赞数 1

分类专栏： js canvas echarts 文章标签： echarts 前端 javascript

于 2022-05-16 15:41:46 首次发布

本文链接：https://blog.csdn.net/Liuer_Qin/article/details/124799876

版权

本文介绍了如何使用html-docx-js插件在前端将包含canvas（如Echarts图表）的内容导出为Word文件。首先，由于canvas无法直接通过DOM获取，需要将其转换为image。接着，克隆DOM并替换canvas为对应的图片，最后使用插件生成文件并下载。

摘要由CSDN通过智能技术生成

一、使用的插件

html-docx-js

二、整体思路

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

三、实现

先克隆要下载的DOM的副本。
因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM。
将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')
  <