js导出页面中的canvas(包括但不限于echart渲染)到doc文档

最新推荐文章于 2026-04-24 09:11:27 发布

原创

最新推荐文章于 2026-04-24 09:11:27 发布 · 1.9k 阅读

本文介绍了如何将包含canvas元素（如使用echart渲染的图表）的HTML页面导出为DOC文档。由于wordexport.js库无法处理canvas，作者采用了file-saver和html-docx-js库。关键步骤包括将canvas转为img，图片链接转为base64，然后使用这两个库实现doc文档的导出。虽然没有提供完整代码，但核心思路和注释已详细说明，鼓励读者自行实践。

问题由来

网上好多导出html到pdf的，今天来挑战下自己，试下能不能html导出到doc文档，网上有个方法是用wordexport.js这个库，但是这个库没法导出图片和canvas，那么只好重新找库，下面我们来分析！

问题分析

我们只需要html中的图片，canvas能导出来即可，其他的简单，那么我们多方查证和测试，发现只有图片能导出到doc，也就是canvas要转换成img格式，图片的url还必须是blob或者base64，于是顺着这个方法我们需要2个第三方js！

file-saver
FileSaver是在客户端保存文件的解决方案，非常适合需要生成文件的Web应用程序，或者用于保存不应发送到外部服务器的敏感信息。
简单说，这个就是导出你word用的。
html-docx-js
这个就是用来转换html到doc的插件，具体大家可以google看下。

如何使用

我们准备工作做完了，接下来进入正题，啥都不说了，这里为了方便，echart举例，我们直接上核心代码！

   var base64= myChart.getDataURL();//echart自带的转换方法，产生base64
    img.src=base64;//把base64赋值给页面上的img，如何获得img标签，大家自行解决
    var converted = htmlDocx.asBlob(content, { orientation: 'landscape' });
    // content是页面上的dom转换的字符串，包含了img这个标签
    //converted是插件处理之后，产生的word流，可以用于导出
    saveAs(converted, 'my.docx'); //导出word

上面这个就是转换方法，具体大家看注释！大家可以按照注释配合核心代码，自己去实践，知难行易！