HTML部分
<div v-for="(item,index) in fileList" :key="index">
<el-image
v-if="item.filetype == 'img'"
:src="item.fileUrl"
>
</el-image>
<iframe
v-if="item.filetype == 'file'"
:src="item.fileUrl"
frameborder="0"
style="width: 100%;height: 900px;"
></iframe>
<div v-if="item.filetype == 'docFile'">
<div :id="'bodyContainer' + item.fileUrl"></div>
</div>
</div>
###引入依赖： import fileDownload from 'js-file-download'
import { renderAsync } from "docx-preview";
###js部分
downloadDocumentUri(item.id).then(res => {
if(/image\/\w+/.test(res.type)) {
arr.push({
filetype: 'img',
fileUrl: window.URL.createObjectURL(res)
})
}
else if(/doc/.test(item.remark)) {
this.docFileIndex += 1
arr.push({
filetype: 'docFile',
fileUrl: this.docFileIndex
})
this.$nextTick(() => {
this.docxRender(res, this.docFileIndex)
})
}
else {
this.handleFileType(item.remark)
let blob = new Blob([res], {
type: this.fileTypeMime
});
arr.push({
filetype: 'file',
fileUrl: window.URL.createObjectURL(blob)
})
}
})
handleFileType() //处理文件类型函数
// 渲染docx
docxRender(buffer, index) {
let bodyContainer = document.getElementById(`bodyContainer${index}`)
renderAsync(
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
).then(res => {
})
},
fileDownload(res, item.fileName + .${item.remark})
res：流文件，
remark：文件类型
