文档跟demo
Docx 渲染库： https://github.com/VolodymyrBaydalka/docxjs#readme
demo例子
安装依赖
npm
使用 API
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, //includes MathML polyfills for chrome, edge, etc.
showChanges: false, //enables experimental rendering of document changes (inserions/deletions)
debug: boolean = false, //enables additional logging
}
): Promise<any>
编写测试demo
<template>
<div class="docx-preview-wrap">
<h1>kaimo test docx-preview</h1>
<h4>
<input type="file" id="file" accept=".docx"/>
<button @click="handlePreview">预览</button>
</h4>
<div id="bodyContainer"></div>
</div>
</template>
<script>import { defaultOptions, renderAsync } from "docx-preview";
console.log(defaultOptions);
export default {
name: 'DocxPreview',
data () {
return {
docxOptions: {
className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
ignoreWidth: false, // boolean：禁用页面的渲染宽度
ignoreHeight: false, // boolean：禁止渲染页面高度
ignoreFonts: false, // boolean：禁用字体渲染
breakPages: true, // boolean：在分页符上启用分页
ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
experimental: false, // boolean：启用实验功能（制表符停止计算）
trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明
useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
debug: false, // boolean：启用额外的日志记录
}
};
},
methods: {
handlePreview() {
let file = document.getElementById("file").files[0];
console.log(file);
// 将file转为buffer
let fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.addEventListener("loadend",(e) => {
console.log("loadend---->", e)
let buffer = e.target.result;
this.docxRender(buffer);
},false);
},
// 渲染docx
docxRender(buffer) {
let bodyContainer = document.getElementById("bodyContainer");
renderAsync(
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
this.docxOptions // 配置
).then(res => {
console.log("res---->", res)
})
}
},
};</script>
测试
启动服务之后我们选择一个 docx 文件
然后点击预览，效果如下：
训练营
