Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/501351981/vue-office

支持word(.docx)、excel(.xlsx,.xls)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word preview library
https://github.com/501351981/vue-office

docx docx-preview excel pdf pdf-preview pdf-viewer vue xlsx xlsx-preview

Last synced: 12 days ago
JSON representation

支持word(.docx)、excel(.xlsx,.xls)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word preview library

Awesome Lists containing this project

README 

        
# vue-office



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



[《演示效果》](https://501351981.github.io/vue-office/examples/dist/)



[《使用非Vue框架（原生js、React等）、或者Vue里面报错，看这里》](https://501351981.github.io/vue-office/examples/docs/guide/js-preview.html)

## 功能特色

- 一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)、ppt(.pptx)多种文档的在线预览方案，有它就够了

- 简单：只需提供文档的src(网络地址)即可完成文档预览

- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态

- 性能好：针对数据量较大做了优化



## 安装

```shell

#docx文档预览组件

npm install @vue-office/docx [email protected]



#excel文档预览组件

npm install @vue-office/excel [email protected]



#pdf文档预览组件

npm install @vue-office/pdf [email protected]



#pptx文档预览组件

npm install @vue-office/pptx [email protected]

```

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

```shell

npm install @vue/composition-api

```



## 使用示例

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

- 有文档网络地址，比如 https://***.docx

- 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob



### .docx文件预览

**使用网络地址预览**

```vue



    



//引入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("渲染完成")

        }

    }

}



```



**上传文件预览**



读取文件的ArrayBuffer

```vue



    


        

        

    



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

            }

        }

    }

}



```



**二进制文件预览**



如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。



```vue



    



//引入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("渲染完成")

        }

    }

}



```



### excel文件预览



通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

```vue



    



//引入VueOfficeExcel组件

import VueOfficeExcel from '@vue-office/excel'

//引入相关样式

import '@vue-office/excel/lib/index.css'



export default {

    components: {

        VueOfficeExcel

    },

    data() {

        return {

            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址

        }

    },

    methods: {

        renderedHandler() {

            console.log("渲染完成")

        },

        errorHandler() {

            console.log("渲染失败")

        }

    }

}



```



### pdf文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

```vue



    



//引入VueOfficePdf组件

import VueOfficePdf from '@vue-office/pdf'



export default {

    components: {

        VueOfficePdf

    },

    data() {

        return {

            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址

        }

    },

    methods: {

        renderedHandler() {

            console.log("渲染完成")

        },

        errorHandler() {

            console.log("渲染失败")

        }

    }

}



```



## 支持作者



### 掘金小册



我的掘金小册[《如何写出高质量的前端代码》](https://juejin.cn/book/7351005935306801188) 已经上线啦，欢迎前端同学关注，希望能够提升大家的前端编码水平。



### 打赏支持



**如果该项目帮您节省了开发时间**，可以请作者喝杯咖啡，加微信交个朋友，交流前端问题。不能打赏的朋友麻烦帮点个免费的赞



赞助二维码



## 打赏50及以上可向作者索要源码（仅限自己项目使用，不能复制开源）



打赏的朋友欢迎**添加微信**，交流前端开发中遇到的技术、问题和困惑。



>【**仅添加**打赏过的用户，不定期删除屏蔽朋友圈的好友（为什么打赏了才能微信问问题？那别人为什么要先付出时间去解答你的问题？都是成年人了，人与人之间是价值交换，不是单向付出）】

> [常见问题](https://501351981.github.io/vue-office/examples/docs/guide/faq.html)



个人微信