Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能
首先, 我們先來創(chuàng)建一個Vue3項目
npm init vue@latest pnpm i npm run dev
運行起來之后, 我們將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'
隨后, 我們賦值一個響應(yīng)式數(shù)據(jù), 用于我們的word展示
import {ref} from 'vue'
const docx = ref('http://test.xxxxx.com/test.docx')剩下的就是在頁面中進(jìn)行使用了
綁定一個自定義事件, 在渲染完成之后, 就會執(zhí)行
我們看一下整體代碼
那么頁面呈現(xiàn)應(yīng)該是什么樣的呢?
這樣就完了嗎? 其實并不然, 我們開發(fā)中還會遇到另一種情況, 就是通過文件上傳的方式, 獲取文件的ArrayBuffer或者blob來預(yù)覽文檔
這個時候, 我們應(yīng)該怎么處理呢?
其實很簡單, 開發(fā)中如何讀取文件內(nèi)容, 就可以應(yīng)用到這里
我們可以給input綁定一個change事件, 當(dāng)我們選擇了文件, change就會觸發(fā)返回給我們一個event對象, 我們通過event對象中的屬性就可以拿到我們的file對象了
const files = event.target.files[0];
獲取到了之后, 我們需要使用FileReader身上的實例方法來讀取我們的文件內(nèi)容
想必大家知道后面怎么做了吧, 我們來實現(xiàn)一下吧
這樣, 我們的代碼就寫完了, 我們看看效果
到此這篇關(guān)于Vue3使用vue-office插件實現(xiàn)word預(yù)覽的文章就介紹到這了,更多相關(guān)Vue3 word預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vite+vue3項目初始化搭建的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
el-table點擊某一行高亮并顯示小圓點的實現(xiàn)代碼
這篇文章主要介紹了el-table點擊某一行高亮并顯示小圓點，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇VUE單頁面切換動畫代碼(全網(wǎng)最好的切換效果)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-cropper插件實現(xiàn)圖片截取上傳組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cropper插件實現(xiàn)圖片截取上傳組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue?+?elementui實現(xiàn)表格多級表頭，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue Tooltip提示動態(tài)換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue.js動態(tài)設(shè)置VueComponent高度遇到的問題及解決
這篇文章主要介紹了vue.js動態(tài)設(shè)置VueComponent高度遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Pinia是一個專為Vue3設(shè)計的現(xiàn)代化狀態(tài)管理庫,本文主要介紹了vue3項目使用pinia狀態(tài)管理器的使用,具有一定的參考價值,感興趣的可以了解一下2024-05-05