文件预览：使用xlsx预览excel文件

文件预览系列：

mavon-editor预览Markdown文件

xlsx预览excel文件

注意事项：

多sheet页的情况需要自己手动处理

一、安装插件：xlsx

// 我目前使用的是0.17.5版本，之前有一次升级后报错
// 如果xlsx内部报错，可以尝试安装其他版本
npm i xlsx

二、使用

1、引入xlsx

import XLSX from 'xlsx';

2、获取文件流数据

注意：后台需要传递文件流过来，前台在接收时responseType需要设置为arraybuffer

            // 预览excel文件
            doloadFile () {
                const params = {
                    url: '文件地址',
                    name: 'aaaaa.xlsx',
                };
                this.$ajax.downloadFileStreamXls(params, 'arraybuffer').then(res => {
                    const data = new Uint8Array(res);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });
                    // 删除掉没有数据的sheet
                    Object.values(workbook.Sheets).forEach((sheet, index) => {
                        if (Object.keys(sheet).indexOf('!ref') === -1) {
                            delete workbook.Sheets[workbook.SheetNames[index]];
                        }
                    });
                    this.tableToHtml(workbook);
                });
            },

3、处理获取到的数据进行展示

            // 预览excel文件
            tableToHtml (workbook) {
                console.log(workbook);
                const sheetList = workbook.SheetNames.filter(v => v.indexOf('数据源') === -1);
                this.activeName = sheetList[0];
                sheetList.forEach(sheet => {
                    const worksheet = workbook.Sheets[sheet];
                    if (worksheet) {
                        const innerHTML = XLSX.utils.sheet_to_html(worksheet);
                        this.excelSheet.push({
                            name: sheet,
                            innerHTML: innerHTML
                        });
                    } else {
                        this.excelSheet.push({
                            name: sheet,
                            innerHTML: '暂无数据',
                        });
                    }
                });
                this.DialogVisible = true;
            }

三、完整代码

<template>
    <div class="file-pre">
        <el-tabs v-model="activeName" v-if="DialogVisible" type="border-card">
            <el-tab-pane v-for="(item,index) in excelSheet" :key="index" :label="item.name" :name="item.name">
                <div class="table" v-html="item.innerHTML"></div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import XLSX from 'xlsx';
    export default {
        data () {
            return {
                DialogVisible: false,
                excelSheet: [],
                activeName: ''
            };
        },
        mounted () {
            this.doloadFile();
        },
        methods: {
            // 预览excel文件
            doloadFile () {
                const params = {
                    url: '文件路径',
                    name: 'aaaaa.xlsx',
                };
                this.$ajax.downloadFileStreamXls(params, 'arraybuffer').then(res => {
                    const data = new Uint8Array(res);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });
                    // 删除掉没有数据的sheet
                    Object.values(workbook.Sheets).forEach((sheet, index) => {
                        if (Object.keys(sheet).indexOf('!ref') === -1) {
                            delete workbook.Sheets[workbook.SheetNames[index]];
                        }
                    });
                    this.tableToHtml(workbook);
                });
            },
            // 预览excel文件
            tableToHtml (workbook) {
                console.log(workbook);
                const sheetList = workbook.SheetNames.filter(v => v.indexOf('数据源') === -1);
                this.activeName = sheetList[0];
                sheetList.forEach(sheet => {
                    const worksheet = workbook.Sheets[sheet];
                    if (worksheet) {
                        const innerHTML = XLSX.utils.sheet_to_html(worksheet);
                        this.excelSheet.push({
                            name: sheet,
                            innerHTML: innerHTML
                        });
                    } else {
                        this.excelSheet.push({
                            name: sheet,
                            innerHTML: '暂无数据',
                        });
                    }
                });
                this.DialogVisible = true;
            }
        }
    };
</script>

<style lang="less" scope>
html body {
    width: 100%;
    height: 100vh;
    margin: 0;
}

.file-pre {
    height: calc(100vh - 40px);
    padding: 20px;

    .table-html-wrap /deep/ table {
        border-right: 1px solid #e8eaec;
        border-bottom: 1px solid #e8eaec;
        border-collapse: collapse;
        margin: auto;
    }

    .table-html-wrap /deep/ table td {
        border-left: 1px solid #e8eaec;
        border-top: 1px solid #e8eaec;
        white-space: wrap;
        text-align: left;
        min-width: 100px;
        padding: 4px;
    }

    table {
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        width: 100%;
        overflow: auto;

        tr {
            height: 44px;
        }

        td {
            min-width: 200px;
            max-width: 400px;
            padding: 4px 8px;
            border-right: 1px solid #EBEEF5;
            border-bottom: 1px solid #EBEEF5;
        }
    }

    .el-tabs--border-card {
        // height: calc(100vh - 40px);;
    }

    .el-tabs--border-card > .el-tabs__content {
        overflow: auto;
        height: calc(100vh - 110px);
    }
}
</style>