亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3使用vue-office插件實現(xiàn)word預覽功能

 更新時間：2024年04月01日 11:11:55   作者：Hello.Reader  
vue-office是一個支持多種文件(docx、.xlsx、pdf)預覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了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ā)中如何讀取文件內容, 就可以應用到這里

我們可以給input綁定一個change事件, 當我們選擇了文件, change就會觸發(fā)返回給我們一個event對象, 我們通過event對象中的屬性就可以拿到我們的file對象了

const files = event.target.files[0];

獲取到了之后, 我們需要使用FileReader身上的實例方法來讀取我們的文件內容

想必大家知道后面怎么做了吧, 我們來實現(xiàn)一下吧

這樣, 我們的代碼就寫完了, 我們看看效果

到此這篇關于Vue3使用vue-office插件實現(xiàn)word預覽的文章就介紹到這了,更多相關Vue3 word預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論