docxx npm实现在线预览word文档
官网:npm参数
项目使用:
reViewFile_2(){
let body = {
"distCodes": [],
"startDate": "",
"endDate": "",
"county": ""
}
this.$axios({
url: this.$main + "/******",
method: "post",
data: body,
timeout: 180000,
responseType: "blob",
}).then((res) => {
const blob = res.data;
docxx.renderAsync(
blob, //文档流
this.$refs.refWold, //挂载dom
null, //样式
{ renderFooters:false } //不显示页脚 其他参数参考api
);
})
.catch(() => {
this.loading = false;
});
},
renderAsync(
document: Blob | ArrayBuffer | Uint8Array, // could be any type that supported by JSZip.loadAsync
bodyContainer: HTMLElement, //element to render document content,
styleContainer: HTMLElement, //element to render document styles, numbeings, fonts. If null, bodyContainer will be used.
options: {
className: string = "docx", //class name/prefix for default and document style classes
inWrapper: boolean = true, //enables rendering of wrapper around document content
ignoreWidth: boolean = false, //disables rendering width of page
ignoreHeight: boolean = false, //disables rendering height of page
ignoreFonts: boolean = false, //disables fonts rendering
breakPages: boolean = true, //enables page breaking on page breaks
ignoreLastRenderedPageBreak: boolean = true, //disables page breaking on lastRenderedPageBreak elements
experimental: boolean = false, //enables experimental features (tab stops calculation)
trimXmlDeclaration: boolean = true, //if true, xml declaration will be removed from xml documents before parsing
useBase64URL: boolean = false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
useMathMLPolyfill: boolean = false, //@deprecated includes MathML polyfills for chrome, edge, etc.
renderChanges: false, //enables experimental rendering of document changes (inserions/deletions)
renderHeaders: true, //enables headers rendering
renderFooters: true, //enables footers rendering
renderFootnotes: true, //enables footnotes rendering
renderEndnotes: true, //enables endnotes rendering
debug: boolean = false, //enables additional logging
}): Promise<any>