欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年04月01日 11:11:55   作者：Hello.Reader  
vue-office是一個(gè)支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了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è)自定義事件, 在渲染完成之后, 就會執(zhí)行

我們看一下整體代碼

那么頁面呈現(xiàn)應(yīng)該是什么樣的呢?

這樣就完了嗎? 其實(shí)并不然, 我們開發(fā)中還會遇到另一種情況, 就是通過文件上傳的方式, 獲取文件的ArrayBuffer或者blob來預(yù)覽文檔

這個(gè)時(shí)候, 我們應(yīng)該怎么處理呢?

其實(shí)很簡單, 開發(fā)中如何讀取文件內(nèi)容, 就可以應(yīng)用到這里

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

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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論