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

支持word(.docx)、excel(.xlsx)、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: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/501351981/vue-office
• Owner: 501351981
• License: mit
• Created: 2022-11-09T02:07:52.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-21T10:36:56.000Z (6 months ago)
• Last Synced: 2024-01-03T08:16:16.595Z (6 months ago)
• Topics: docx, docx-preview, excel, pdf, pdf-preview, pdf-viewer, vue, xlsx, xlsx-preview
• Language: JavaScript
• Homepage: https://501351981.github.io/vue-office/examples/docs/
• Size: 68.7 MB
• Stars: 2,544
• Watchers: 15
• Forks: 322
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Lists

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

README

        
# vue-office

支持多种文件(**docx、excel、pdf**)预览的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)

[《详细配置》](https://501351981.github.io/vue-office/examples/docs/config/)

## 功能特色

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

- 简单：只需提供文档的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]

```

如果是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("渲染失败")

        }

    }

}

```

## 打赏支持

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



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

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

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

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



# 我的其他库：

- 如何更优雅地进行前端表单开发：[ConfigForm](https://github.com/501351981/config-form)