解决使用vue-office组件预览excel时隐藏sheet工作表也渲染出来了

如何使用vue-office

请看之前写的一篇文章，本文针对vue-office 使用过程中遇到的问题进行复盘。 vue-office使用案例

问题

在使用vue-office-excle组件时，sheet工作表隐藏状态下，预览时还会渲染出来。

请看下图，这是在wps上将sheet工作进行隐藏操作。

使用vue-office-excle组件进行预览，还会渲染隐藏后的工作表。

解决方案

vue-office-excle 组件提供了配置选项beforeTransformData函数和transformData函数

<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,
                minColLength: 0,
                minRowLength: 0,
                widthOffset: 10,
                heightOffset: 10,
                beforeTransformData: (workbookData) => {
                    workbookData.worksheets.forEach(item => {item._name = `${item._name}$^_^$${item.state}`})
                    return workbookData
                },
                transformData: (workbookData) => {

                    workbookData = workbookData.filter(item => {
                        let state = item.name.split("$^_^$")[1];
                        return state != "hidden" && state != "veryHidden";
                    }).map(item => {
                        item.name = item.name.split("$^_^$")[0];
                        return item;
                    })

                    return workbookData;
                },
                excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'
            }
        },
            methods: {
            renderedHandler() {
                console.log("渲染完成")
            },
            errorHandler() {
                console.log("渲染失败")
            }
        }
    }
}
</script>

设计思路

其实看起来很简单已经提供了数据处理函数。因为这两个函数参数不一致，各种参数更改都没有达到想要的结果。

transformData 函数参数才是即将渲染的excle数据，但是在beforeTransformData函数里处理worbookData 数据处理state 隐藏属性，在transformData函数里取不到属性值。

最后利用修改sheet名将隐藏表格state属性和name 进行拼接。然后在transformData函数里处理需要隐藏的sheet工作表数据。详细实现过程请看上面代码。