快捷導(dǎo)航

js前端頁面用插件docx-preview展示docx文件

更新時間：2024年11月26日 11:12:33 作者：shengmeshi

這篇文章主要給大家介紹了如何使用docx-preview.min.js插件在頁面上展示.docx文件,并說明了該插件依賴于jszip.min.js插件,通過實例展示了如何實現(xiàn)這一功能,需要的朋友可以參考下

需求：頁面展示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預(yù)加載展示文檔
            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>