前端预览word文档实现
import axios from 'axios';
// 引入docx-preview插件
let docx = require('docx-preview');
export default {
data() {
return {
fileLink: ':10000/getDoc'
}
},
mounted() {
console.log('使用插件的renderAsync方法来渲染', docx) //
},
methods: {
// 预览
goPreview() {
axios({
method: 'get',
responseType: 'blob', // 因为是流文件，所以要指定blob类型
url: this.fileLink // 一个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 is used
useMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.
debug: false //enables additional logging
}) // 渲染到页面
})
}
}
}