需求： 页面展示docx文件
使用插件：docx-preview.min.js，以及该插件依赖jszip.min.js
1、jszip.min.js 地址：https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js2、docx-preview.min.js 地址： https://github.com/VolodymyrBaydalka/docxjs //自测项目用了vue
3、vue.js地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
插件使用实例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="file" @change="upload"><div ref="file"></div></div><script src="./jszip.min.js"></script><script src="./vue.js"></script><script src="./docx-preview.min.js" type="text/javascript"></script>
<script>var app = new Vue({el: '#app',data: {file: null},mounted(){this.getApi("./****.docx");//本地文档地址：./****.docx},methods: {//1、通过input预加载展示文档upload(e) {this.file = e.target.files[0]console.log('this.file=-======',this.file)docx.renderAsync(this.file, this.$refs.file);},//2、直接请求本地文档getApi(path){let _that = this;let xhr = new XMLHttpRequest();xhr.open('GET', path, true);xhr.responseType = 'blob';xhr.onload = function (e) {if (this.status == 200) {//docx文档blob对象type类型值为：//application/vnd.openxmlformats-officedocument.wordprocessingml.documentlet blob = new Blob([this.response], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});// 使用blob对象进行操作console.log('blob=====',blob)docx.renderAsync(blob, _that.$refs.file);}};xhr.send();}}})
</script>
</body>
</html>