Vue在线预览word(需要插件)

下载插件

1. npm i docx-preview@0.1.4
2.  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);
});
},
},
};
</script>
<style scoped>
</style>