纯前端JS导出Word包含图片

最新推荐文章于 2024-08-09 09:39:13 发布

mingo2806

最新推荐文章于 2024-08-09 09:39:13 发布

阅读量2.7k

点赞数 7

分类专栏： javascript react 文章标签： html javascript

本文链接：https://blog.csdn.net/mingo2806/article/details/120260939

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

react

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用纯前端JS实现将包含图片的HTML内容导出为Word文档。依赖于file-saver库，通过将HTML转换为blob并保存。当图片为URL时，此方法有效，但若图片为base64，推荐使用docx库，它提供了更丰富的样式设置和文档构建功能。

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

纯前端JS导出Word包含图片

纯前端JS导出Word文档包含图片

纯前端JS导出Word文档包含图片

在做项目中，遇到一个需求，是将后台返回的属性以及URL图片导出word文档。

Word导出方式

我们通过将需要导出的内容写成HTML，通过将html转成blob，再通过file-saver将文件导出：

依赖

npm install file-saver --save；

实现代码

    /**
     * 下载word
     */
    _downloadWord = () => {
        let node = `<div>
        <span class='title-span'>这里是文档</span>
        <img width=400 height=300 src='这里是图片URL' alt='加载失败'></div>`;

        let html = this._creatHtmlTree(node, style);
        let style = ".title-span{ font-size:16px; color:red }";
        let blob = new Blob([html], { type: "application/vnd.ms-word;charset=UTF-8" });
        FileSaver.saveAs(blob, "文档名称.doc");
    }
    /**
     * 生成HTML
     * @param {String} htmlTree html
     * @param {String} style 样式
     */
    _creatHtmlTree = (htmlTree, style = '') => {
        return `
                <!DOCTYPE html>
                    <html lang="en">
   					<head>
                    <meta charset="UTF-8">
                    <style>
                        ${style}
                    </style>
                    </head>
                    <body>
                        ${htmlTree}
                    </body>
                    </html>`
    }
  //直接调用   _downloadWord方法即可。