h5预览docx文档

1. 需要使用docx-preview依赖

cnpm i docx-preview --save

2. sample

<template>
	<button @click="previewDocx">资治通鉴</button>
	<view class="docWrap">
	      <!-- 预览文件的地方（用于渲染） -->
	      <view id="docx"></view>
	</view> 
</template>

<script>
	import { defaultOptions, renderAsync } from "docx-preview"; 
	export default {
		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：启用额外的日志记录
				},
				url: 'http://user-moyu.oss-cn-chengdu.aliyuncs.com/docx/%E8%B5%84%E6%B2%BB%E9%80%9A%E9%89%B4.docx'
			}
		},
		methods: {
			previewDocx(){
				let docx_preview = document.getElementById('docx');
				uni.request({
					url: this.url,
					responseType: 'arraybuffer',
					success(res) {
						console.log('res',res.data);
						renderAsync(
							res.data,
							docx_preview,
							null,
							this.docxOptions
						).then(res => {
							console.log("res---->", res)
						})
					}
				})
				
				
			}
		}
	}
</script>

3. 效果