参考文档：
https://blog.csdn.net/m0_60067716/article/details/124018275
https://www.csdn.net/tags/OtDaggysMDI0ODItYmxvZwO0O0OO0O0O.html
下载插件
npm i docx-preview@0.1.4
npm i jszip
完整代码
<template>
<div class="app">
<el-button @click="preview">预览</el-button>
<el-dialog
v-if="previewShow"
title="预览"
:visible.sync="previewShow"
append-to-body
width="90%"
>
<!-- word 显示-->
<div ref="word"></div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" plain @click="previewShow = false"
>关 闭</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
data() {
return {
previewShow: false,
};
},
methods: {
// 后端返回二进制流
preview() {
// 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
this.previewShow = true;
axios
.get("你们后端的地址（下载地址）", {
responseType: "blob",
})
.then((res) => {
// 对后端返回二进制流做处理
const blob = new Blob([res]);
docx.renderAsync(blob, this.$refs.word);
// docx.renderAsync(data, this.$refs.word)
});
},
},
};
</script>
<style scoped>
</style>
