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