阅读量:0
需求： 页面展示docx文件
使用插件：docx-preview.min.js，以及该插件依赖jszip.min.js
1、jszip.min.js 地址：https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js 2、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.document let 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> 