1. 需求分析

當(dāng)我們?cè)谧鑫募A(yù)覽功能時(shí)，往往會(huì)遇到一種糟糕的情況。

就是每預(yù)覽一種類型的文件，就需要重新安裝、配置、編寫一個(gè)新的庫(kù)來(lái)實(shí)現(xiàn)，很麻煩，也很繁瑣。

于是，我尋找了一個(gè)可以通用的預(yù)覽庫(kù)，來(lái)處理這個(gè)問(wèn)題。

vue-office，一個(gè)支持多種文件docx、excel、pdf預(yù)覽的vue組件庫(kù)，作者h(yuǎn)it757。這個(gè)庫(kù)不僅能支持vue2/3，也支持非Vue框架的預(yù)覽使用。

先看一下線上演示效果，如果實(shí)現(xiàn)效果與項(xiàng)目使用不符，為節(jié)約朋友們時(shí)間，可自行選擇是否向下閱讀。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。

如果朋友們覺(jué)得能用，就繼續(xù)往下面看看它的實(shí)現(xiàn)。

2. 實(shí)現(xiàn)步驟

（1）關(guān)于針對(duì)特定類型文件的預(yù)覽庫(kù)

如果不使用這種vue-office通用的多文件類型預(yù)覽庫(kù)，我們可能需要使用如下這些，關(guān)于針對(duì)特定類型文件的預(yù)覽庫(kù)，包括但不限于：

• 預(yù)覽PDF：

pdf.js：是由 Mozilla 開(kāi)發(fā)的用于在瀏覽器中渲染PDF文件的JavaScript庫(kù)。你可以使用它在Vue項(xiàng)目中嵌入PDF預(yù)覽功能。

Vue-PDF：是一個(gè)用于在Vue項(xiàng)目中顯示PDF文件的組件。它基于PDF.js構(gòu)建，提供了簡(jiǎn)單易用的API。

• 預(yù)覽Excel：

SheetJS：是一個(gè)強(qiáng)大的用于處理Excel文件的JavaScript庫(kù)。你可以使用它在Vue項(xiàng)目中讀取Excel文件并顯示內(nèi)容。

• 預(yù)覽Word：

Mammoth.js：是一個(gè)用于將.docx文件轉(zhuǎn)換為HTML的JavaScript庫(kù)。你可以使用它在Vue項(xiàng)目中將Word文檔轉(zhuǎn)換為HTML并顯示。

• 預(yù)覽圖片：

el-image組件：預(yù)覽圖片的需求，用它我覺(jué)得一般就足夠了。

Viewer.js：是一個(gè)強(qiáng)大的用于在瀏覽器中查看圖片的JavaScript庫(kù)。你可以使用它在Vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽功能。

Vue Image Viewer：是一個(gè)用于在Vue項(xiàng)目中實(shí)現(xiàn)圖片查看器功能的組件。它支持縮放、旋轉(zhuǎn)等功能。

（2）vue-office預(yù)覽word文件使用

安裝依賴：

#docx文檔預(yù)覽組件
npm install @vue-office/docx vue-demi@0.13.11

如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。

npm install @vue/composition-api/

使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼：

<template>
<vue-office-docx 
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>

<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關(guān)樣式
import '@vue-office/docx/lib/index.css'

export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //設(shè)置文檔網(wǎng)絡(luò)地址，可以是相對(duì)地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>

使用上傳文件預(yù)覽代碼（讀取文件的ArrayBuffer）：

<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
components: {
VueOfficeDocx
},
data(){
return {
src: ''
}
},
methods:{
changeHandle(event){
let file = event.target.files[0]
let fileReader = new FileReader()
fileReader.readAsArrayBuffer(file)
fileReader.onload = () => {
this.src = fileReader.result
}
}
}
}
</script>

使用接口返回的二進(jìn)制文件預(yù)覽代碼：

如果后端給的不是CDN地址，而是一些POST接口，該接口返回二進(jìn)制流，則可以調(diào)用接口獲取文件的ArrayBuffer數(shù)據(jù)，傳遞給src屬性。

<template>
<vue-office-docx 
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>

<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關(guān)樣式
import '@vue-office/docx/lib/index.css'

export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: '' 
}
}, 
mounted(){
fetch('你的API文件地址', {
method: 'post'
}).then(res=>{
//讀取文件的arrayBuffer
res.arrayBuffer().then(res=>{
this.docx = res
})
})
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>

（3）vue-office預(yù)覽excel文件使用

安裝依賴：

#excel文檔預(yù)覽組件
npm install @vue-office/excel vue-demi@0.13.11

如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。

npm install @vue/composition-api/

使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼、使用上傳文件預(yù)覽代碼、使用接口返回的二進(jìn)制文件預(yù)覽代碼，基本都和word文件預(yù)覽使用相同，只不過(guò)需要修改邏輯中對(duì)樣式和組件對(duì)象的引用：

//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'

（4）vue-office預(yù)覽pdf文件使用

安裝依賴：

#pdf文檔預(yù)覽組件
npm install @vue-office/pdf vue-demi@0.13.11

如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。

npm install @vue/composition-api/

使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼、使用上傳文件預(yù)覽代碼、使用接口返回的二進(jìn)制文件預(yù)覽代碼，基本都和word文件預(yù)覽使用相同，只不過(guò)需要修改邏輯中對(duì)樣式和組件對(duì)象的引用：

//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'

3. 問(wèn)題詳解

（1）關(guān)于vue-office文檔地址

為了朋友們閱讀到此處時(shí)，方便查閱官方文檔學(xué)習(xí)。

最后附上，vue-office官方文檔地址：https://github.com/501351981/vue-office。

關(guān)于非Vue框架的使用，也請(qǐng)移步參考官方文檔。