js 前端页面页面展示docx文件【插件docx-preview】
shengmeshi 2024-09-30 14:03:02 阅读 88
需求： 页面展示docx文件
使用插件：docx-preview.min.js，以及该插件依赖jszip.min.js
<code>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">code>
<title></title>
</head>
<body>
<div id="app">code>
<input type="file" @change="upload">code>
<div ref="file"></div>code>
</div>
<script src="./jszip.min.js"></script>code>
<script src="./vue.js"></script>code>
<script src="./docx-preview.min.js" type="text/javascript"></script>code>
<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>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。