Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能
首先, 我們先來創(chuàng)建一個(gè)Vue3項(xiàng)目
npm init vue@latest pnpm i npm run dev
運(yùn)行起來之后, 我們將App.vue中的代碼全部刪除掉
現(xiàn)在, 頁面干凈了, 我們需要安裝vue-office插件
npm install @vue-office/docx vue-demi
安裝完成之后, 我們就可以在頁面中進(jìn)行使用了
需要我們將組件和樣式進(jìn)行引入
//引入VueOfficeDocx組件 import VueOfficeDocx from '@vue-office/docx' //引入相關(guān)樣式 import '@vue-office/docx/lib/index.css'
隨后, 我們賦值一個(gè)響應(yīng)式數(shù)據(jù), 用于我們的word展示
import {ref} from 'vue'
const docx = ref('http://test.xxxxx.com/test.docx')剩下的就是在頁面中進(jìn)行使用了
綁定一個(gè)自定義事件, 在渲染完成之后, 就會(huì)執(zhí)行
我們看一下整體代碼
那么頁面呈現(xiàn)應(yīng)該是什么樣的呢?
這樣就完了嗎? 其實(shí)并不然, 我們開發(fā)中還會(huì)遇到另一種情況, 就是通過文件上傳的方式, 獲取文件的ArrayBuffer或者blob來預(yù)覽文檔
這個(gè)時(shí)候, 我們應(yīng)該怎么處理呢?
其實(shí)很簡(jiǎn)單, 開發(fā)中如何讀取文件內(nèi)容, 就可以應(yīng)用到這里
我們可以給input綁定一個(gè)change事件, 當(dāng)我們選擇了文件, change就會(huì)觸發(fā)返回給我們一個(gè)event對(duì)象, 我們通過event對(duì)象中的屬性就可以拿到我們的file對(duì)象了
const files = event.target.files[0];
獲取到了之后, 我們需要使用FileReader身上的實(shí)例方法來讀取我們的文件內(nèi)容
想必大家知道后面怎么做了吧, 我們來實(shí)現(xiàn)一下吧
這樣, 我們的代碼就寫完了, 我們看看效果
到此這篇關(guān)于Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽的文章就介紹到這了,更多相關(guān)Vue3 word預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
Element el-checkbox-group v-model不支持對(duì)象(object)解決方案
本文主要介紹了Element el-checkbox-group v-model不支持對(duì)象(object)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vuex中如何getters動(dòng)態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動(dòng)態(tài)獲取state的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中echarts3.0自適應(yīng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Vue項(xiàng)目如何根據(jù)圖片url獲取file對(duì)象并用axios上傳
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)圖片url獲取file對(duì)象并用axios上傳問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問題
這篇文章主要介紹了vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
這周工作中遇見了一個(gè)表格動(dòng)態(tài)列的需求,下面這篇文章主要給大家介紹了關(guān)于vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法
今天小編就為大家分享一篇在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11