vue + vue-office 实现多种文件(docx、excel、pdf)的预览

支持多种文件( docx、excel、pdf)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。

github: 《仓库地址》

演  示： 《演示效果》

功能特色

• 一站式：提供docx、pdf、excel多种文档的在线预览方案，有它就够了
• 简单：只需提供文档的src(网络地址)即可完成文档预览
• 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态

安装

1.  
   #docx文档预览组件
2.  
   npm install @vue-office/docx vue-demi
3.  
    
4.  
   #excel文档预览组件
5.  
   npm install @vue-office/excel vue-demi
6.  
    
7.  
   #pdf文档预览组件
8.  
   npm install @vue-office/pdf vue-demi

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api/

使用示例

文档预览场景大致可以分为两种：

• 有文档网络地址，比如 https://***.docx
• 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob

.docx文件预览

使用网络地址预览

1.  
   <template>
2.  
   <vue-office-docx
3.  
   :src="docx"
4.  
   style="height: 100vh;"
5.  
   @rendered="rendered"
6.  
   />
7.  
   </template>
8.  
    
9.  
   //引入VueOfficeDocx组件
10.  
    import VueOfficeDocx from '@vue-office/docx'
11.  
    //引入相关样式
12.  
    import '@vue-office/docx/lib/index.css'
13.  
     
14.  
    export default {
15.  
    components:{
16.  
    VueOfficeDocx
17.  
    },
18.  
    data(){
19.  
    return {
20.  
    docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
21.  
    }
22.  
    },
23.  
    methods:{
24.  
    rendered(){
25.  
    console.log("渲染完成")
26.  
    }
27.  
    }
28.  
    }

上传文件预览

读取文件的ArrayBuffer

1.  
   <template>
2.  
   <div>
3.  
   <input type="file" @change="changeHandle"/>
4.  
   <vue-office-docx :src="src"/>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
    
9.  
   import VueOfficeDocx from '@vue-office/docx'
10.  
    import '@vue-office/docx/lib/index.css'
11.  
     
12.  
    export default {
13.  
    components: {
14.  
    VueOfficeDocx
15.  
    },
16.  
    data(){
17.  
    return {
18.  
    src: ''
19.  
    }
20.  
    },
21.  
    methods:{
22.  
    changeHandle(event){
23.  
    let file = event.target.files[0]
24.  
    let fileReader = new FileReader()
25.  
    fileReader.readAsArrayBuffer(file)
26.  
    fileReader.onload = () => {
27.  
    this.src = fileReader.result
28.  
    }
29.  
    }
30.  
    }
31.  
    }

excel文件预览和pdf文件预览通过文件ArrayBuffer预览和上面docx的使用方式一致。

这篇好文章是转载于：学新通技术网