纯前端JS导出Word包含图片

最新推荐文章于 2024-03-01 11:58:02 发布

mingo2806

最新推荐文章于 2024-03-01 11:58:02 发布

阅读量2.2k

点赞数 1

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

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

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

react

3 篇文章 0 订阅

订阅专栏

纯前端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方法即可。

上面这种方式有一个缺点，img标签的src只能是URL，如果是base64则导出来图片无法显示。
如果需要导出的图片是base64，可以使用docx， npm i docx，该包功能很强大，可以设置各种各样的样式、标题等等。
如果对docx感兴趣可参考如下链接：
*

https://docx.js.org/#/?id=installation

mingo2806

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯前端JS导出Word包含图片

纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中，遇到一个需求，是将后台返回的属性以及URL图片导出word文档。Word导出方式我们通过将需要导出的内容写成HTML，通过将html转成blob，再通过file-saver将文件导出：依赖npm install file-saver --save；实现代码 /** * 下载word */ _downloadWord =
复制链接

扫一扫