1. 下载 npm install docx-preview -S
2.
<el-button @click="lookDocx">文件阅览</el-button>
<div class="docWrap">
<div ref="file"></div>
</div>
import axios from 'axios';
let docx = require('docx-preview');
lookDocx(){
axios({
method: 'get',
responseType: 'blob', // 因为是流文件,所以要指定blob类型
url: '/pyapi/shop/tools/select-order-template' // 一个word下载文件的接口
}).then((data) => {
console.log(data) // 后端返回的是流文件
/**
* 第一个参数: data为文件流,Blob | ArrayBuffer | Uint8Array 格式
* 第二个参数: 渲染到页面的dom元素
* 第三个参数: 渲染word文档的样式的元素,如果为null,则设置到第二个参数的DOM上
* 第四个参数: 配置对象
*/
docx.renderAsync(data, this.$refs.file, null, {
className: 'text-docx', //class name/prefix for default and document style classes
inWrapper: true, //enables rendering of wrapper around document content
ignoreWidth: false, //disables rendering width of page
ignoreHeight: false, //disables rendering height of page
ignoreFonts: false, //disables fonts rendering
breakPages: true, //enables page breaking on page breaks
ignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elements
experimental: true, //enables experimental features (tab stops calculation)
trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsing
useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
useMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.
debug: false //enables additional logging
}) // 渲染到页面
})
}