解析二进制的文件流实现在线预览word
场景:解析接口返回的文件流,实现word预览解决:1、通过Blob解析二进制文件流2、通过mammoth将源文档转换为html3、用vue渲染该html见文档mammoth.js, 将Word文档(. docx 文件) 转换为 HTML知识:mammoth.convertToHtml(input, options)将源文档转换为 HTML。input: 描述源文档的对象。 在 node.js 上,
·
场景:解析接口返回的文件流,实现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>
更多推荐
已为社区贡献1条内容
所有评论(0)