Vue2問題：分享一個通用多文件類型預覽庫
1. 需求分析
當我們在做文件預覽功能時，往往會遇到一種糟糕的情況。
就是每預覽一種類型的文件，就需要重新安裝、配置、編寫一個新的庫來實現，很麻煩，也很繁瑣。
于是，我尋找了一個可以通用的預覽庫，來處理這個問題。
vue-office，一個支持多種文件docx、excel、pdf預覽的vue組件庫，作者hit757。這個庫不僅能支持vue2/3，也支持非Vue框架的預覽使用。
先看一下線上演示效果，如果實現效果與項目使用不符，為節約朋友們時間，可自行選擇是否向下閱讀。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。
如果朋友們覺得能用，就繼續往下面看看它的實現。
2. 實現步驟
（1）關于針對特定類型文件的預覽庫
如果不使用這種vue-office通用的多文件類型預覽庫，我們可能需要使用如下這些，關于針對特定類型文件的預覽庫，包括但不限于：
- 預覽PDF：
pdf.js：是由 Mozilla 開發的用于在瀏覽器中渲染PDF文件的JavaScript庫。你可以使用它在Vue項目中嵌入PDF預覽功能。
Vue-PDF：是一個用于在Vue項目中顯示PDF文件的組件。它基于PDF.js構建，提供了簡單易用的API。
- 預覽Excel：
SheetJS：是一個強大的用于處理Excel文件的JavaScript庫。你可以使用它在Vue項目中讀取Excel文件并顯示內容。
- 預覽Word：
Mammoth.js：是一個用于將.docx文件轉換為HTML的JavaScript庫。你可以使用它在Vue項目中將Word文檔轉換為HTML并顯示。
- 預覽圖片：
el-image組件：預覽圖片的需求，用它我覺得一般就足夠了。
Viewer.js：是一個強大的用于在瀏覽器中查看圖片的JavaScript庫。你可以使用它在Vue項目中實現圖片預覽功能。
Vue Image Viewer：是一個用于在Vue項目中實現圖片查看器功能的組件。它支持縮放、旋轉等功能。
（2）vue-office預覽word文件使用
安裝依賴：
#docx文檔預覽組件
npm install @vue-office/docx vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼：
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //設置文檔網絡地址，可以是相對地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>使用上傳文件預覽代碼（讀取文件的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>使用接口返回的二進制文件預覽代碼：
如果后端給的不是CDN地址，而是一些POST接口，該接口返回二進制流，則可以調用接口獲取文件的ArrayBuffer數據，傳遞給src屬性。
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
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預覽excel文件使用
安裝依賴：
#excel文檔預覽組件
npm install @vue-office/excel vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼、使用上傳文件預覽代碼、使用接口返回的二進制文件預覽代碼，基本都和word文件預覽使用相同，只不過需要修改邏輯中對樣式和組件對象的引用：
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關樣式
import '@vue-office/excel/lib/index.css'（4）vue-office預覽pdf文件使用
安裝依賴：
#pdf文檔預覽組件
npm install @vue-office/pdf vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼、使用上傳文件預覽代碼、使用接口返回的二進制文件預覽代碼，基本都和word文件預覽使用相同，只不過需要修改邏輯中對樣式和組件對象的引用：
//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'3. 問題詳解
（1）關于vue-office文檔地址
為了朋友們閱讀到此處時，方便查閱官方文檔學習。
最后附上，vue-office官方文檔地址：https://github.com/501351981/vue-office。
關于非Vue框架的使用，也請移步參考官方文檔。
