解析二进制的文件流实现在线预览word

场景：解析接口返回的文件流，实现word预览

解决：
1、通过Blob解析二进制文件流
2、FileReader 接口提供的 readAsArrayBuffer() 方法读取指定的 Blob
3、通过mammoth将读取文件的数据转换为html
4、用vue渲染该html
见文档
mammoth.js, 将Word文档(. docx 文件) 转换为 HTML
FileReader

知识：
mammoth.convertToHtml(input, options)将源文档转换为 HTML。
input: 描述源文档的对象。 在 node.js 上，支持以下输入：
{path: path}，其中 path 是. docx 文件的路径。
{buffer: buffer}，其中 buffer 是包含. docx 文件的node.js 缓冲区。
在浏览器中，支持以下输入：
{arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 缓冲区。
options ( 可选): 转换的选项。
浏览器表示支持arrayBuffer
转换也仅仅支持docx

示例：

npm install --save mammoth

<template>
    <div>
          <div v-html="vHtml" />
    </div>
</template>
<script>
import mammoth from 'mammoth'
export default {
    data(){
        return: {
            vHtml: '',
        }
    },
	methods: {
	    wordPreview() {
			const that = this
			this.exportFileApi('Employee/ExportEmployeeInfo').then(response => {
				const content = response
				const blob = new Blob([content], {
					type: "application/octet-stream"
				})
				var reader = new FileReader()
				reader.readAsArrayBuffer(blob)
				reader.onload = function(e) {
					const buffer = e.target.result // 此时是arraybuffer类型
					mammoth.convertToHtml({ arrayBuffer: buffer }).then((result) => {
						this.vHtml = result.value
					}).done()
				}
			})
	    }
	}
}
</script>