总阅读量:次

⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 江南一点雨 「江南一点雨」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

今天给小伙伴们介绍一个前端的办公文件浏览库。

一 vue-office

vue-office 是一个支持多种文件(docx、.xlsx、pdf)预览的 vue 组件库，支持 vue2 和 vue3。

vue-office 有三个特色：

  • 一站式：提供 docx、.xlsx、pdf 多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了
  • 使用简单：只需提供文档的 src (网络地址)即可完成文档预览，也支持 ArrayBuffer、Blob 等多种格式
  • 支持样式：不仅能预览内容，也支持文档样式，最大限度还原 office 文件内容

好啦，不废话，接下来我们就来看下这个开源组件该如何使用。

二 安装

首先我们需要在自己的前端项目中安装 vue-office：

#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-apinpm install @vue/composition-api

安装好之后就可以使用啦～

三 使用

3.1 预览 docx

<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入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: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

可以看到，组件使用非常 easy，只需要提供 docx 文档的链接地址即可，上面案例中展示的是一个网络地址，当然这个位置也可以给一个相对地址。

在预览的时候我们可以设置组件的 style 配置样式，一般来说我们只需要设置下高度 height 即可，如果不设置则默认取组件的父元素高度，最小高度 300px。

组件渲染完成会抛出 rendered 事件，渲染失败会抛出 error 事件，方便我们在事件中做后续处理。

上面案例展示的是一个远程文件，有时候我们想要预览即将上传的文件，上传前预览主要是通过读取文件的 ArrayBuffer 格式，传给预览组件来实现。

松哥这里以 ElementUI 的上传组件作为示例，当然也可以使用普通的 input type=”file”，只要能获取文件的 ArrayBuffer 格式数据即可。

我们来看下如何预览即将上传的文件：

<template>
    <div id="docx-demo">
        <el-upload
            :limit="1"
            :file-list="fileList"
            accept=".docx"
            :beforeUpload="beforeUpload"
            action=""
        >
            <el-button size="small" type="warning">点击上传</el-button>
        </el-upload>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            src: '',
            fileList: []
        }
    },
    methods: {
        //在beforeUpload中读取文件内容
        beforeUpload(file) {
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (loadEvent) => {
                let arrayBuffer = loadEvent.target.result;
                this.src = arrayBuffer
            };
            return false
        }
    }
}
</script>

上面的案例主要是利用在 beforeUpload 中获取上传的文件，然后利用 FileReader 以 ArrayBuffer 格式读取，读取之后传给预览组件。

如果是原生的 input 标签 type=”file”，也是类似的：

<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
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
            }
        }
    }
}
</script>

3.2 预览 pdf

搞明白了 docx 的预览，那么 pdf 预览也差不多：

<template>
    <vue-office-pdf 
        :src="pdf"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入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("渲染失败")
        }
    }
}
</script>

3.3 预览 excel

同理，excel 预览也类似：

<template>
    <vue-office-excel
        :src="excel"
        :options="options"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options:{
                xls: false,       //预览xlsx文件设为false；预览xls文件设为true
                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
                beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },
            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

❝

这块有个不足之处就是目前只支持 xlsx 文件预览，不支持 xls 文件。

四 常见问题

预览传入的的文件地址不能跨域，跨域就预览不出来了～

这个问题我们可以通过 Nginx 配置去解决，通过 Nginx 使前后端处于同一域中：

具体配置如下：

server {  
    listen 80;  
    server_name example.com;  
  
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {  
        root /data/static;  
        expires 30d; # 缓存静态文件30天  
    }  
  
    location / {  
        proxy_pass http://javaboy.org; # 假设后端应用服务器  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    }  
}

这样，前后端处于同一域中，就不存在跨域问题了。

项目地址：https://github.com/501351981/vue-office

感兴趣的小伙伴可以去试试～

文章目录
  1. 1. 一 vue-office
  2. 2. 二 安装
  3. 3. 三 使用
    1. 3.1. 3.1 预览 docx
    2. 3.2. 3.2 预览 pdf
    3. 3.3. 3.3 预览 excel
  4. 4. 四 常见问题