js前端頁面用插件docx-preview展示docx文件
更新時(shí)間：2024年11月26日 11:12:33 作者：shengmeshi
這篇文章主要給大家介紹了如何使用docx-preview.min.js插件在頁面上展示.docx文件,并說明了該插件依賴于jszip.min.js插件,通過實(shí)例展示了如何實(shí)現(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 //自測(cè)項(xiàng)目用了vue 3、vue.js地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
插件使用實(shí)例
<!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、直接請(qǐng)求本地文檔
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對(duì)象type類型值為：
//application/vnd.openxmlformats-officedocument.wordprocessingml.document
let blob = new Blob([this.response], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
// 使用blob對(duì)象進(jìn)行操作
console.log('blob=====',blob)
docx.renderAsync(blob, _that.$refs.file);
}
};
xhr.send();
}
}
})
</script>
</body>
</html>總結(jié)
到此這篇關(guān)于js前端頁面用插件docx-preview展示docx文件的文章就介紹到這了,更多相關(guān)js前端展示docx文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序模板語法，WXML（WeiXin?Markup?Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了Ionic3實(shí)現(xiàn)圖片瀑布流布局，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開運(yùn)行）
這篇文章主要介紹了JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開運(yùn)行）的相關(guān)資料,需要的朋友可以參考下2016-01-01
js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點(diǎn)偏移問題
本文主要介紹了js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點(diǎn)偏移問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
排序算法的理解算是程序員的基本功之一了，其功能是對(duì)一個(gè)數(shù)據(jù)元素集合或序列重新排列成一個(gè)按數(shù)據(jù)元素某個(gè)項(xiàng)值有序的序列。2011-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片查看器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時(shí)會(huì)遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09
jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
這篇文章主要介紹了jquery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
使用JavaScript和HTML實(shí)現(xiàn)一個(gè)精美的計(jì)算器
計(jì)算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進(jìn)行簡(jiǎn)單的數(shù)學(xué)運(yùn)算,在本博文中,我將使用JavaScript編寫一個(gè)漂亮的計(jì)算器,并添加加減乘除功能,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2023-09-09
JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法
這篇文章主要介紹了JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法,實(shí)例分析了javascript操作dom元素模擬運(yùn)動(dòng)的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03