jsTable 生成Excel表格xlsx表格

这个文章的内容是表格生成文件，表格生成文件，表格生成文件

这一篇是对应的文件生成表格

适用于各种js框架，这边有2种情况：

1、将页面的table 元素 变成excel文件并下载（详见1.1和1.2）
2、如果excel数据非常大的话后端将数据变成excel 前端直接下载这个文件（详见2.1）

下载依赖

yarn add xlsx

你所需要的Table

<table border="1">
                    <thead>
                        <tr>
                            <th>1小时候</th>
                            <th>长大后</th>
                            <th>小时候</th>
                            <th>长大后</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>3哭着哭着就笑了</td>
                            <td>笑着笑着就哭了</td>
                            <td>我们终于到了小时候最羡慕的年纪</td>
                            <td>确没能成为小时候最想成为的人</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>2枕头上是口水</td>
                            <td>枕头上是泪水</td>
                            <td>微笑是一种心情</td>
                            <td>微笑是一种表情</td>
                        </tr>
                    </tfoot>
                </table>

1.1：

createElsx() {
        // 获取表格的dom元素
        var elt = document.getElementsByTagName('table')[0];
        console.log(elt)
        // 将表格的dom 元素转化为 excel工作薄
        var wb = XLSX.utils.table_to_book(elt, { sheet: "Sheet JS" });
        // 将工作薄导出为excel文件
        XLSX.writeFile(wb, '呵呵哒.xlsx');
    }

    componentDidMount(){
        this.createElsx()
    }

1.2：

  createElsx() {
        let arr = [
            ["序号", '姓名', '年纪'],
            ["0", '呵呵哒', '15'],
            ["1", '12313', '15'],
        ]
        // 将数组转化为标签页
        var ws = XLSX.utils.aoa_to_sheet(arr);
        // 创建工作薄
        var wb = XLSX.utils.book_new()
        // 将标签页插入到工作薄里
        XLSX.utils.book_append_sheet(wb, ws)
        // 将工作薄导出为excel文件
        XLSX.writeFile(wb, '呵呵哒.xlsx');
    }

    componentDidMount() {
        this.createElsx()
    }

2.1

// 前端直接下载
前端进行下载

<button onclick='download()'>open下载</button>
<iframe name='myFrame' style="display:none;"></iframe>
<script>
function download(){
window.open('http://localhost:3000/getelsx','myFrame')
}
</script>
// tips:通过iframe可以不让浏览器闪一下