js 前端页面页面展示docx文件【插件docx-preview】

最新推荐文章于 2024-08-30 09:47:04 发布

shengmeshi

最新推荐文章于 2024-08-30 09:47:04 发布

阅读量970

点赞数 6

文章标签：插件docx-preview js docx

本文链接：https://blog.csdn.net/shengmeshi/article/details/140845019

版权

需求：页面展示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>