支持多種文件( docx、excel、pdf)預(yù)覽的vue組件庫，支持vue2/3。也支持非Vue框架的預(yù)覽。
github: 《倉庫地址》
演 ?示： 《演示效果》
功能特色
- 一站式：提供docx、pdf、excel多種文檔的在線預(yù)覽方案，有它就夠了
- 簡單：只需提供文檔的src(網(wǎng)絡(luò)地址)即可完成文檔預(yù)覽
- 體驗(yàn)好：選擇每個文檔的最佳預(yù)覽方案，保證用戶體驗(yàn)和性能都達(dá)到最佳狀態(tài)
安裝
#docx文檔預(yù)覽組件
npm install @vue-office/docx vue-demi
#excel文檔預(yù)覽組件
npm install @vue-office/excel vue-demi
#pdf文檔預(yù)覽組件
npm install @vue-office/pdf vue-demi如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api
npm install @vue/composition-api/使用示例
文檔預(yù)覽場景大致可以分為兩種：
- 有文檔網(wǎng)絡(luò)地址，比如 https://***.docx
- 文件上傳時預(yù)覽，此時可以獲取文件的ArrayBuffer或Blob
.docx文件預(yù)覽
使用網(wǎng)絡(luò)地址預(yù)覽
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
//引入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ò)地址，可以是相對地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}上傳文件預(yù)覽
讀取文件的ArrayBuffer文章來源：http://www.zghlxwxcb.cn/news/detail-656207.html
<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>
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
}
}
}
}excel文件預(yù)覽和pdf文件預(yù)覽通過文件ArrayBuffer預(yù)覽和上面docx的使用方式一致。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-656207.html
到了這里，關(guān)于vue + vue-office 實(shí)現(xiàn)多種文件(docx、excel、pdf)的預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
