先上效果图

下载插件

npm i docx-preview@0.1.4
npm i jszip

完整代码

<template><div class="app"><el-button @click="preview">预览</el-button><el-dialogv-if="previewShow"title="预览":visible.sync="previewShow"append-to-bodywidth="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);});},},
};
</script>
<style scoped>
</style>

二进制流长这样

 

注意事项

1.我是放在dialog中显示的，你也可以放到其他容器内

2.后端需要返回二进制流，和下载接口一样

3.如果使用容器上使用了v-if，需要提前显示容器，否则有时候会查找不到 就会报错了。

4.支持.docx后缀，不支持.doc后缀，暂时没找到解决方法，以后找到了回来补。

在线预览PDF地址：Vue在线预览PDF（不需要安装插件）

有帮助到你 记得点点赞哦~