https://www.toutiao.com/article/7218818409369190964/
https://github.com/VolodymyrBaydalka/docxjs
docxjs
我们都知道pdf有js库可以使pdf文档用浏览器在线阅读，Excel文档也有在线生成的js库，word docx文档在线阅读，以前用过微软提功能的在线阅读web工具。这里推荐一个能自主部署的docx文档在线渲染js库：docxjs。
在线渲染效果
docxjs使用
这个js库使用方法非常简单，直接使用cdn方式引用，注意为了兼容性要引用polyfill哦：
<!--optional polyfill for promise-->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>
var docData = <document Blob>;
docx.renderAsync(docData, document.getElementById("container"))
.then(x => console.log("docx: finished"));
</script>
<body>
...
<div id="container"></div>
...
</body>应用程序接口
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>缩略图、目录相关
例如，仅添加缩略图，它不是库的一部分。库将 DOCX 渲染为 HTML，因此无法有效地将其用于缩略图。
目录是使用 TOC 字段构建的，此时没有有效的方法来获取目录，因为尚不支持字段
注意事项
当前库确实会中断页面：
如果插入了用户/手动分页符 - 当用户插入分页符时<w:br w:type=”page”/>
如果插入了应用程序分页符 - 可以通过编辑器应用程序（如MS Word）插入（应设置为false）<w:lastRenderedPageBreak/>ignoreLastRenderedPageBreak
如果段落的页面设置已更改 - 例如：用户将设置从纵向页面更改为横向页面
未实现实时分页符，因为它需要重新计算每次插入的大小，这可能会对性能产生很大影响。
如果分页对您来说很困难，我建议您：
尝试尽可能多地插入手动断点
尝试使用像MS Word这样的编辑器，插入断点<w:lastRenderedPageBreak/>
注：缺省设置为 。您可能需要将其设置为 ，以使库按断点中断
ignoreLastRenderedPageBreaktruetrue<w:lastRenderedPageBreak/>
状态和稳定性
到目前为止，我无法提出解析文档的最终方法和 API 的最终结构。只有 renderAsync 函数是稳定的，将来不应更改定义。解析和呈现的内部实现可以随时更改。
在线体验演示地址：
https://volodymyrbaydalka.github.io/docxjs/
