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

蔚落 2023-10-14 20:25 15阅读 0赞

![6873a202308081201197234.jpg][]

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

github: [《仓库地址》][Link 1]

演 示： [《演示效果》][Link 2]

### 功能特色 ###

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

### 安装 ###

#docx文档预览组件
    npm install @vue-office/docx vue-demi
    
    #excel文档预览组件
    npm install @vue-office/excel vue-demi
    
    #pdf文档预览组件
    npm install @vue-office/pdf vue-demi

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

npm install @vue/composition-api/

### 使用示例 ###

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

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

#### .docx文件预览 ####

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

<template>
      <vue-office-docx 
          :src="docx"
          style="height: 100vh;"
          @rendered="rendered"
      />
    </template>
    
    //引入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

<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文件预览和pdf文件预览通过文件ArrayBuffer预览和上面docx的使用方式一致。 ####

[6873a202308081201197234.jpg]: https://img-blog.csdnimg.cn/img_convert/bc269e3b3f0837b73abb5c8cc1d91750.jpeg
[Link 1]: https://github.com/501351981/vue-office
[Link 2]: https://501351981.github.io/vue-office/examples/dist/#/docx