需求： 页面展示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
//自测项目用了vue3、vue.js地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
插件使用实例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><divid="app"><inputtype="file"@change="upload"><divref="file"></div></div><scriptsrc="./jszip.min.js"></script><scriptsrc="./vue.js"></script><scriptsrc="./docx-preview.min.js"type="text/javascript"></script><script>var app =newVue({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 =newXMLHttpRequest();
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 =newBlob([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>
本文转载自: https://blog.csdn.net/shengmeshi/article/details/140845019
版权归原作者 shengmeshi 所有， 如有侵权，请联系我们删除。
版权归原作者 shengmeshi 所有， 如有侵权，请联系我们删除。