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 //自測項(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、直接請求本地文檔
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對象進(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS自定義滾動條效果的簡單實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文給大家分享的是使用javascript實(shí)現(xiàn)判斷微信版本號以及判斷是否在內(nèi)置的微信瀏覽器中打開的代碼，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變r(jià)gba的a值實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過改變r(jià)gba的a值實(shí)現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)的不規(guī)則TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的不規(guī)則TAB選項(xiàng)卡效果代碼,基于鼠標(biāo)事件動態(tài)設(shè)置頁面元素樣式實(shí)現(xiàn)該效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
微信小程序使用request網(wǎng)絡(luò)請求操作實(shí)例
這篇文章主要介紹了微信小程序使用request網(wǎng)絡(luò)請求操作,結(jié)合實(shí)例形式分析了wx.request(object)網(wǎng)絡(luò)請求操作的具體使用技巧,需要的朋友可以參考下2017-12-12
兩個(gè)等號直接比較值，但是類型不能相互轉(zhuǎn)換的時(shí)候報(bào)錯(cuò)2010-04-04
javascript獲得網(wǎng)頁窗口實(shí)際大小的示例代碼
網(wǎng)頁窗口實(shí)際大小如何獲得，可行的方法有很多，在本文將為大家介紹下使用javascript是怎樣做到的2013-09-09
這篇文章主要介紹了小程序自動化測試，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript設(shè)計(jì)模式之外觀模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式實(shí)例,本文用一些代碼實(shí)例來講解JavaScript中的外觀模式,需要的朋友可以參考下2014-10-10
這是介紹的是一個(gè)不錯(cuò)的javascript的方面的客戶端解決方案,可選配支持HTML5本地存儲器.2010-07-07