前端实现一键导出 Excel

最新推荐文章于 2024-04-18 14:03:10 发布

狂飙的蜗牛@

最新推荐文章于 2024-04-18 14:03:10 发布

阅读量99

点赞数

文章标签：前端 excel

本文链接：https://blog.csdn.net/feng0926top/article/details/134501675

版权

推荐一个 jquery 的 table2excel 插件实现一键导出excel 前端页面必须是表格才可以哦

我的代码是 laravel 为例前端参考即可原理一样

1.下载 table2excel 插件为大家提供百度网盘资源

百度网盘链接：https://pan.baidu.com/s/1Fo6Lr3Yog2Yvdp9W-iZpJg
提取码：ypc0

下载完成将js文件放在项目根目录，方便引入

2. 页面渲染和引入 js

@extends('Layouts.main')

@section('content')
    <body>
    <span class="btn_sty export">导出</span>
    <div class="box_pub table_box1">
        <table class="tableexport">
            <thead>
                <tr>
                    <th>测试1</th>
                    <th>测试2</th>
                    <th>测试3</th>            
                </tr>
            </thead>
            <tbody>
                <tr style="height: 30px">
                    <td>张三</td>
                    <td>李四</td>
                    <td>王五</td>
                </tr>
            </tbody>
        </table>
    </div>

        </table>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('jquery.table2excel.js') }}" type="text/javascript"></script>

@endsection

3. js代码实现导出 excel

通过点击事件实现功能注意表格的类必须和js中的类保持一致，比如我的类是 tableexport

$('.export').click(function (){
       //循环表格的行
       $('.tableexport'+' tr').each(function(i, _tr) {
                var tds = $(_tr).find('td') //得到每行的所有列
                tds.each(function(j, _td) {
                    //循环每列
                    var _ipt = $(_td).find('input') //查找每列当中的INPUT控件
                    var hasInput = _ipt.length > 0 ? 1 : 0
                    if (hasInput) {
                        //console.log('第'+(i+1)+'行'+(j+1)+'列含有INPUT控件');
                        console.log(_ipt.val())
                        _ipt.attr('value', _ipt.val()) //如果有INPUT控件就给它设置value值
                    }
                })
            })
            $('.tableexport').table2excel({
                // 不被导出的表格行的CSS class类
                exclude: '.noExl',
                // 导出的Excel文档的名称
                name: 'Excel Document Name',
                // Excel文件的名称
                filename: '测试数据',
                //文件后缀名
                fileext: '.xls',
                //是否排除导出图片
                exclude_img: true,
                //是否排除导出超链接
                exclude_links: true,
                //是否排除导出输入框中的内容
                exclude_inputs: true
            })
})

完成以上便可以直接导出如有问题请留言