1. 下载
npm i docx-preview --save
2. 页面引入
// 引入axios用来发请求
import axios from "axios";
// 引入预览插件
import { renderAsync } from "docx-preview";
3.页面元素
<template>
<div>
<el-button @click="downloadDOCX">下载</el-button>
<el-button @click="goPreview">点击预览word文件</el-button>
<!-- 预览文件的位置 -->
<div class="docWrap">
<div ref="file"></div>
</div>
</div>
</template>
4. 页面方法
export default {
name: 'TransactionLog',
components: {},
data() {
return {}
},
mounted() {
},
methods: {
//下载
downloadDOCX() {
axios({
method: 'POST',
responseType: 'blob',
url: `${process.env.VUE_APP_BASE_API}/rest/world/getNoticeLetterWord`,
data: {'入参'},
}).then(response => {
let url = URL.createObjectURL(response.data);
console.log(url);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
//download属性可以设置下载到本地时的文件名称,经测试并不需要加文件后缀
a.setAttribute('download', '文件名.docx');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
//释放内存
URL.revokeObjectURL(url);
}).catch( res => {})
},
// 预览
goPreview() {
// 需求需要先获取要预览的文件名称
this.$http.post('文件名称查询API').then(res => {
if(res && res.length) {
this.worldFileList = res
// 获取到后测试把[0]项传过去
this.worldFileView(this.worldFileList[0])
}
}).catch(() => {})
},
worldFileView(val) {
axios({
method: 'POST',
responseType: 'blob', // 注意预览的类型
url: `${process.env.VUE_APP_BASE_API}请求地址拼接预览API`,
Headers: { 'Content-Type': 'application/octet-stream' }, //请求头，看各自需求
data: { fileName: val }, // 入参
}).then(response => {
// world 文档内容预览
let bodyContainer = this.$refs.file
// 配置
renderAsync(
// 预览的数据，拿到接口返回值，（具体看文件流在那个值下边，看数据层级）
response.data, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
this.docxOptions // 配置 暂时没配置 看自己需求配置
)
}).catch( res => {})
}
}
}
</script>