前端实现word导出（之前插件的一个原理解析）_filesaver基于什么原理

作者：笔触狂放9 | 2024-02-26 07:40:28

踩

filesaver基于什么原理

前言OvO

这是对之前导出插件的一个原理的再次实现~

之前导出插件的博客

一、实现一个word导出需要些什么？

我们要利用Blob对象和FilerSaver

二、Blob

Blob是什么？
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。
Blob有两个参数
参数1：数据序列，可以是任意格式的值,这里必须以数组的形式传递进去
参数2：一个对象其中有两个属性{ type: MIME的类型, endings: 决定第一个参数的数据格式，
可以取值为 “transparent” 或者 “native”（transparent的话不变，是默认值，native 的话
按操作系统转换）。 }
例：let blob01 = new Blob( [JSON.stringify(str,null,2)], {type:"application/json"});

三、FileSaver

FileSaver是npm中可以下载的一个包，用比特流来存储大的文件，或者是保存下载文件
1.安装

npm install file-saver --save
1

2、在Vue或者React中引入

import FileSaver from 'file-saver';  
1

3、准备导出模板
我们可以给Blob的对象传入一个html的模板，导出的word便会根据我们的html代码进行渲染并呈现出来

/*两个参数：mhtml为你传递进来的html代码，style即是html的对应样式*/
 function getModelHtml(mhtml,style = ""){
        return `
        Content-Type: text/html; charset="utf-8"
      <!DOCTYPE html>
      <html>
      <head>
      <style>
        ${style}
      </style>
      </head>
      <body>
        ${mhtml}
      </body>
      </html>
        `
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.创建Blob对象并调用File.saveAs()
（1）准备好我们的html代码

	    let node = "<div class='a'>你好你好</div>";
        let style = ".a{font-size:80px;color:'red'}"
1
2

（2）使用我们刚刚准备好的html模板并创建Blob对象

		let html = this.getModelHtml(node,style)
        let blob = new Blob([html],{type:"application/msword;charset=utf-8"});
1
2

注意Blob对象的第二个参数的导出格式，这里使用的msword因为要导出word
（3）调用FileSaver.saveAs导出下载word

FileSaver.saveAs(blob, "导出word的名字.doc");
1

第一个参数：刚刚新建的Blob对象
第二个参数：文件名（String类型，记得注意导出格式）

最终效果：
在这里插入图片描述

5、补充

当你的word文件需要生成表格时，table之类的布局经过实测都可以使用，图片使用
<img src="xxx"/>也可以写入word中，这只是一个简易的demo，记得写项目时进行一下封装哦~

参考链继：
FileSaver：https://www.cnblogs.com/jackyWHJ/articles/10435851.html
参考源码：https://github.com/BetterZxx/mhtml-to-word

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/144965