精华内容
下载资源
问答
  • Vue项目中el-table导出Excel
    2022-03-01 14:27:03

    1、安装相关的依赖;(xlsx,file-saver)

    npm install --save xlsx file-saver

    2、在main.js里引入

    import FileSaver from 'file-saver'

    import XLSX from 'xlsx'

    Vue.prototype.$FileSaver = FileSaver; //设置全局

    Vue.prototype.$XLSX = XLSX; //设置全局

    3、设置表格的id

    <el-table
        id="out-table"
        :header-cell-style="{
        background: 'rgba(245,248,253,1)',
        color: '#554'
        }"
        :row-style="{ height: '30px' }"
        :cell-style="{ padding: '0px'}"
        border
        :data="tableData"
        v-loading="loading"
        stripe
    >
    <el-table>

    4、导出按钮(触发)

    <el-button
        size="small"
        type="primary"
        icon="el-icon-download"
        @click="exportData"
    >导出</el-button>

    5、下载处理

    methods: {
        //导出功能
        exportData(){
          let excelName = '导出表格名称.xlsx';
          var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
          // 克隆节点
          let tables = document.getElementById("out-table").cloneNode(true);
          // 判断是否为固定列,解决(为固定列时,会重复生成表格)
          if (tables.querySelector('.el-table__fixed') !== null) {
            tables.removeChild(tables.querySelector('.el-table__fixed'))
          }
          let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
          var table_write = this.$XLSX.write(table_book, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
          });
          try {
              this.$FileSaver.saveAs(
                  new Blob([table_write], { type: "application/octet-stream" }),
                  excelName
              );
          } catch (e) {
              if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
          
        }
    }
    更多相关内容
  • 主要介绍了基于JS实现table导出Excel并保留样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • bootstrap table导出表格

    2018-09-20 16:31:57
    table导出表格,支持中文csv、pdf、txt
  • js操作table导出excel

    2018-05-27 16:30:34
    资源提供js操作html、table导出生成excel文件,代码简介易懂
  • Ligerui Table 导出excel表格 (基于jquery) 1.支持原样式导出 2.支持带图片导出 3.支持固定行固定列导出
  • 可将页面的Table元素导出到Excel,设置灵活,通用性强。 参数说明:table的ID名,工作表名,标题,页面设置,单元格设置,副标题,附加信息,行高,首行高,缩放比例 ID名赋值格式: Table表的ID,如果是导出...
  • 用于bootstrap数据表格的导出插件,在引入bootstrap其他主要js和css的前提下,再将bootstrap-table-export.js和tableExport.js引入。包里有两个版本的
  • 由于项目需要,关于js将table转为excel,纠结了好久,在网上找了很多资料,前面也上传了两个版本,后来发现问题很多,到目前为止这个版本是兼容性最好。可以自定义文件名,下载表格有边框,有标题,欢迎下载;
  • 使用bootstrap-table客户端分页生成表格,导出表格按照单元格内容相同合并单元格
  • 里面包含了jquery.table2excel.js,用于table直接导出Excel文件,有例子可以参考
  • 使用tableExport.js将table导出Excel时,必须用的Bootstrap中的FileSaver.js文档
  • C#将html table 导出成excel实例,需要的朋友可以参考一下
  • bootstrap table 导出下载

    2019-01-11 11:32:50
    bootstrap table 下载Excel文件。增加插件. https://blog.csdn.net/fulq1234/article/details/86293139
  • table导出excel

    2018-05-30 09:27:08
    table导出excel的小控件 。兼容IE、谷歌。转换效果好,
  • js将html中table导出Excel,CVS格式
  • 自己写的一个关于页面表格(HtmlTable导出为Execl的功能,专门用户一些复杂的报表导出,因为有些表头存在一些合并单元格、或合并行问题。
  • 使用bootstrap-table-export插件将html的table表格导出为excle文件
  • JSP中table导出多表头excel 使用前台JS实现,需要设置IE的active
  • html table 导出Excel,xml

    2018-01-11 14:49:18
    一款好用的插件 ,html table导出Excel文件。支持导出多种格式: Excel,Word,TXT,CSV,XML,SQL,JSON。等等。好用请点赞
  • 为了能够实现前端表格的导出功能,各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。 可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 ...
  • js table导出以及打印

    2019-06-03 14:12:05
    该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG,PDF格式。在项目上遇到pdf导出中文乱码问题,经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题,随便融入了一个html...
  • element-ui table导出excel

    千次阅读 2022-03-30 13:18:21
    element-ui table导出excel

    1.首先安装导出excel所需要的两个依赖包
    这里下载的话最好是指定一下版本,不然会出现版本问题

    npm install  xlsx@^0.16.0 --save
    npm install  file-saver@^2.0.2 --save
    

    2.下载完成后在指定的页面引入使用

    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    

    3.然后要给需要导出的table定义一个id在这里插入图片描述
    4.通过点击事件调用导出excel的函数
    在这里插入图片描述
    5.导出函数
    注意:导出的时候下面一段代码是不对格式进行处理导出,以防止导出的时候日期什么的会出现乱码,可以根据情况来决定时候要加

    var xlsxParam = { raw: true };
    
     //定义导出Excel表格事件
        exportExcel() {
          var xlsxParam = { raw: true };
          /* 从表生成工作簿对象 */
          var wb = XLSX.utils.table_to_book(
            document.querySelector("#out-table"),
            xlsxParam
          );
          /* 获取二进制字符串作为输出 */
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
              new Blob([wbout], { type: "application/octet-stream" }),
              //设置导出文件名称
              "sheetjs.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
        },
    

    下面是完整代码

    <template>
      <div>
        <div>
          <el-table id="out-table" :data="tableData" max-height="600">
            <el-table-column label="id"> </el-table-column>
            <el-table-column label="姓名"> </el-table-column>
          </el-table>
        </div>
    
        <el-button size="small" type="primary" @click="exportExcel"
          >导出excel</el-button
        >
      </div>
    </template>
    
    <script>
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
      data() {
        return {
          tableData: [],
        };
      },
      methods: {
        //定义导出Excel表格事件
        exportExcel() {
          var xlsxParam = { raw: true };
          /* 从表生成工作簿对象 */
          var wb = XLSX.utils.table_to_book(
            document.querySelector("#out-table"),
            xlsxParam
          );
          /* 获取二进制字符串作为输出 */
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
              new Blob([wbout], { type: "application/octet-stream" }),
              //设置导出文件名称
              "sheetjs.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
        },
      },
    };
    </script>
    
    <style>
    </style>
    
    展开全文
  • JQuery实现web页面中table导出JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 支持中文导出
  • 自己查找了所有网络资源上的html页面tabel导出为excel,发现都不好用,这个是我自己写的,项目中实际用到的,包括前段js,和后端ExcelController, 可以通用
  • layer系列之table导出功能总结

    千次阅读 2019-09-26 13:37:10
    关于layui导出方式,直接使用layui(版本2.4.5及以上)自带的导出方法即可: layui官网地址:https://www.layui.com/ 源码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> &...

     

    关于layui导出方式,直接使用layui(版本2.4.5及以上)自带的导出方法即可:

    layui官网地址https://www.layui.com/

    源码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui--layui-table导出Excel</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> -->
    <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
    <button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
    <button class="layui-btn" data-type="parseTable" οnclick="convertToTable()">将数据转化为静态表格</button>
    <button class="layui-btn" data-type="parseTableToExcel" οnclick="exportToExcel()">导出Excel</button>
    </div>

    <table lay-filter="parse-table-demo">
    <thead>
    <tr>
    <th lay-data="{field:'username', width:200}">昵称</th>
    <th lay-data="{field:'joinTime', width:150}">加入时间</th>
    <th lay-data="{field:'sign', minWidth: 180}">签名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>贤心1</td>
    <td>2016-11-28</td>
    <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
    <td>贤心2</td>
    <td>2016-11-29</td>
    <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
    <td>贤心3</td>
    <td>2016-11-30</td>
    <td>人生就像是一场修行 C</td>
    </tr>
    </tbody>
    </table>
    <!--直接为table绑定数据-->
    <table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck"></table>

    <!--引用layui.js  直接从layui官网下载2.4.5版本的layui.js-->

    <script src="../layui-v2.4.5/layui/layui.js"></script>
    <script>
    var exportBillsData=[{
    'nos':1,
    'CompanyId':1001,
    'CompanyName':"携程",
    'Sex':'男'
    },{
    'nos':2,
    'CompanyId':1002,
    'CompanyName':"携程1",
    'Sex':'女'

    }];
    layui.use('table', function(){
    var table = layui.table;

    });

    //1.转化为静态表格-直接为layui-table绑定数据
    function convertToTable(){
    layui.use('table', function () {
    var table = layui.table;
    table.render({
    elem: '#table_TravelagenceCheck'
    , height: 480
    , title: "协议贡献量明细"
    , page: true
    , size: 'sm'
    , toolbar: "协议入住明细"
    , defaultToolbar: ['filter', 'print', 'exports']
    , limit: 200
    , limits: [200]

    //直接绑定data
    , data: exportBillsData

    , cols: [[ //表头
    { field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }
    , { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }
    , { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }
    , { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }
    ]]
    });
    });
    }


    //导出Excel-注明:table.exportFile方法是layui-table自带的,适用于2.4.5版本,2.3.0版本的layui.js没有这个方法
    function exportToExcel(){
    layui.use('table', function () {
    var table = layui.table;
    table.exportFile(["昵称", "加入时间", "签名"],[
    ['贤心1','2016-11-28','人生就像是一场修行 A'],
    ['贤心2','2019-11-28','人生就像是一场修行 B'],
    ['贤心3','2016-10-28','人生就像是一场修行 C']
    ],'本日将到订单列表.xls');
    });
    }
    //导出Excel1
    function exportToExcel1(){
    layui.use('table', function () {
    var table = layui.table;
    table.exportFile(["#","账号", "类型", "姓名", "房型", "房号", "状态", "成交价",
    "余额", "信用金额", "预付金额", "到达", "离开", "手机", "房数", "联房",
    "VIP", "房价码", "市场码", "公司", "预订号", "备注"],[
    ['1','F1908090001','F','jackA302','三人房有窗 浪漫','A302','R','120','400','0','0','2019-08-09 09:33','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908090001','-'],
    ['2','F1908210008','F','jackG202','双床房海景','G202','R','501','0','0','0','2019-08-22 09:16','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908210003','-'],
    ['3','F1908210012','F','李先生/李先生','双床房海景','-','R','501','0','0','0','2019-08-22 12:00','2019-08-23 12:00','1777***3792','1','-','-','BASE','上门散客','-','R1908210004','-'],
    ['4','F1908210030','F','丁小帅','大床房1.5米床 有窗','-','R','31','0','0','0','2019-08-22 12:00','2019-08-23 14:00','1861***8299','1','-','-','VipGold','中央推荐入住','-','190822021002062','【客人留言:测试结果】[使用电子代金券:第1晚30抵30] [AliAPP订单]不赠送早餐;每日房价:2019-08-22:31.00'],
    ['5','F1908220001','F','沙奥','单人房早餐测试','-','R','230','0','0','230','2019-08-22 12:00','2019-08-23 13:00','1317***1407','1','-','-','VipCard','中央推荐入住','银联在线支付','190822021002069','[已支付成功](银联在线支付)[Android手机订单]不赠送早餐;每日房价:2019-08-22:230.00'],
    ['6','F1908220002','F','焦人杰','单人房早餐测试','D203','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220001','自助机办理'],
    ['7','F1908220003','F','焦人杰','单人房早餐测试','D205','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220002','自助机办理'],
    ['8','F1908220004','F','焦人杰','单人房早餐测试','D206','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220003','自助机办理'],
    ['9','F1908210038','F','焦人杰','双床房海景','G208','R','0','0','0','0','2019-08-22 17:34','2019-08-23 17:34','1363***7594','1','-','-','BASE','上门散客','-','R1908210009','自助机办理'],
    ['10','F1908220010','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','18','☆','-','BASE','上门散客','-','R1908220004','-'],
    ['11','F1908220011','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],
    ['12','F1908220012','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],
    ['13','F1908220008','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','☆','VipCard','中央会员预定','银联在线支付','190823021002006','[已支付成功](银联在线支付)[Android手机订单][使用电子代金券:1间房第1晚30抵30]不赠送早餐;每日房价:2019-08-23:430.00'],
    ['14','F1908220009','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','-','VipCard','中央推荐入住','银联在线支付','190823021002007']

    ],'本日将到订单列表.xls');
    });

    }

    </script>

    </body>
    </html>

    补充说明:

     

     

     另外补充layui.js与layui.all.js:参考地址:https://blog.csdn.net/qq_38642674/article/details/88236045

    layui这个框架虽然还有一些不足之处但是我觉得已经非常优秀了,对于layui.js和layui.all.js的区别,网上别人各执一词,我今天遇到个非常恶心令我难受的问题发表一下我对这两个的看法。首先我引入layui.all.js,今天调试发现layui对象的内容如下

     

     

     

     

    大概只有这些模块,其中有很多常用的模块大家都熟悉的。

    然后我换成layui.js,调试layui对象的内容如下

     

    内容差不多,但是少了几个模块,多了几个我自己引入的外部模块。所以我似乎明白了很多关于这两者的区别。

    首先layui.all.js,你引入这个之后,你的layui.use()将不生效,好处是你引用里面有的模块将不用用模块化的写法引入,在js文件中可以直接用layui.table这样用。

    然后layui.js,你引入这个之后,你js所有的layui模块的引用都要用layui.use()来使用,不然将无法使用。

    一句话就是:layui.all.js包含的模块较多,layui.js中包含的模块较少,前者包含后者的所有模块。

    分析:通过以上比较看出如果想用layui-table的导出功能:

    (1)直接引用layui.js (layui.js会饮用其模块中的table.js)直接导出:

    方法如下:

    //导出Excel
    function exportToExcel(){
    layui.use('table', function () {
    var table = layui.table;
    table.exportFile(["昵称", "加入时间", "签名"],[
    ['贤心1','2016-11-28','人生就像是一场修行 A'],
    ['贤心2','2019-11-28','人生就像是一场修行 B'],
    ['贤心3','2016-10-28','人生就像是一场修行 C']
    ],'本日将到订单列表.xls');
    });
    }

     

     

    (2)直接引用layui.all.js

    方法如下:

     

     

     

    源码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui--layui-table导出Excel</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"> -->
    <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
    <button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
    <button class="layui-btn" data-type="parseTable" οnclick="convertToTable()">将数据转化为静态表格</button>
    <button class="layui-btn" data-type="parseTableToExcel" οnclick="exportToExcels()">导出Excel</button>
    </div>

    <table lay-filter="parse-table-demo">
    <thead>
    <tr>
    <th lay-data="{field:'username', width:200}">昵称</th>
    <th lay-data="{field:'joinTime', width:150}">加入时间</th>
    <th lay-data="{field:'sign', minWidth: 180}">签名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>贤心1</td>
    <td>2016-11-28</td>
    <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
    <td>贤心2</td>
    <td>2016-11-29</td>
    <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
    <td>贤心3</td>
    <td>2016-11-30</td>
    <td>人生就像是一场修行 C</td>
    </tr>
    </tbody>
    </table>
    <!--直接为table绑定数据-->
    <table id="table_TravelagenceCheck" lay-filter="TravelagenceCheck">

    </table>
    <!-- <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> -->
    <!-- <script src="../layui-v2.4.5/layui/layui.js"></script> -->
    <script src="../layui-v2.4.5/layui/layui.all.js"></script>
    <script>
    var exportBillsData=[{
    'nos':1,
    'CompanyId':1001,
    'CompanyName':"携程",
    'Sex':'男'
    },{
    'nos':2,
    'CompanyId':1002,
    'CompanyName':"携程1",
    'Sex':'女'

    }];
    layui.use('table', function(){
    var table = layui.table;

    });

    //转化为静态表格
    function convertToTable(){
    layui.use('table', function () {
    var table = layui.table;
    table.render({
    elem: '#table_TravelagenceCheck'
    , height: 480
    , title: "协议贡献量明细"
    , page: true
    , size: 'sm'
    , toolbar: "协议入住明细"
    , defaultToolbar: ['filter', 'print', 'exports']
    , limit: 200
    , limits: [200]

    //直接绑定data
    , data: exportBillsData

    , cols: [[ //表头
    { field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }
    , { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }
    , { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }
    , { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }
    ]]
    });
    });
    }

    //导出Excel
    function exportToExcels(){
    //layui.use('table', function () {
    var table = layui.table;
    table.exportFile(["昵称", "加入时间", "签名"],[
    ['贤心1','2016-11-28','人生就像是一场修行 A'],
    ['贤心2','2019-11-28','人生就像是一场修行 B'],
    ['贤心3','2016-10-28','人生就像是一场修行 C']
    ],'本日将到订单列表.xls');
    // });
    }

    </script>

    </body>
    </html>

    总结:通过上面直接引用layui.all.js导出excel可以看出不用layui.use,直接使用table.exportFile就可以导出,

    注意点:引用2.4.5版本的layui.js时,其自带的layer.js是3.1.1版本的;引用2.4.5版本的layui.all.js时,其自带的layer.js是3.1.1版本的!

    引用2.4.5版本的layui.js后其自带的layer.js版本与系统中已经引入的layer.js版本,如2.2版本的layer.js后,前者的layer.js可能会覆盖掉后者引入的layer.js版本,一些效果会不同。暂时不知道layer.js 3.1.1版本的是不是覆盖2.2版本的。。。。

     

    最后附上:js原生方式的导出:

    源码如下:

    <html>
    <head>
    <style type="text/css">
    .btn_CacheExport{
    display:block;
    width:83px;
    height:40px;
    text-align: center;
    position:center;
    color:black;
    background-color:#C0C0C0;
    line-height: 26px;
    border:1px solid #727373
    }

    </style>
    <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>

    <button download="table导出Excel-第二种方式" οnclick='tableToExcel()' id="excelOut1">导出</button>
    <a οnclick='tableToExcel()' class="btn_CacheExport" id="excelOut2">导出</a><!-- download="table导出Excel-第二种方式" -->
    <a download="table导出Excel-第二种方式" href="javascript:;" οnclick="tableToExcel()" id="excelOut3">导出30-300207房态报表</a>
    </head>

    <body>
    <script>

    function tableToExcel(){
    //要导出的json数据
    const jsonData = [
    {
    name:'路人甲',
    phone:'123456',
    email:'123@123456.com'
    },
    {
    name:'炮灰乙',
    phone:'123456',
    email:'123@123456.com'
    },
    {
    name:'土匪丙',
    phone:'123456',
    email:'123@123456.com'
    },
    {
    name:'流氓丁',
    phone:'123456',
    email:'123@123456.com'
    },
    ]
    //列标题
    let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
    //循环遍历,每行加入tr标签,每个单元格加td标签
    for(let i = 0 ; i < jsonData.length ; i++ ){
    str+='<tr>';
    for(let item in jsonData[i]){
    //增加\t为了不让表格显示科学计数法或者其他格式
    str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
    }
    str+='</tr>';
    }
    //Worksheet名
    let worksheet = '这是导出的Excel'
    let uri = 'data:application/vnd.ms-excel;base64,';

    //下载的表格模板数据
    let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:x="urn:schemas-microsoft-com:office:excel"
    xmlns="http://www.w3.org/TR/REC-html40">
    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>${worksheet}</x:Name>
    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    </head><body><table>${str}</table></body></html>`;

    //下载导出1:使用button按钮
    //window.location.href = uri + base64(template);//这种方式导出的Excel文件没有指定文件名

    //下载导出2:使用a标签,指定a标签的download属性后导出的Excel文件有文件名!!!

    document.getElementById("excelOut2").download = "导出excel哦";//指定导出的Excel文件名称

    document.getElementById("excelOut2").href = uri + base64(template);//使用a标签的download属性可以指定导出的Excel文件名

    }
    //输出base64编码
    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    </script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/newcapecjmc/p/11540240.html

    展开全文
  • Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007) 先将bootstrap-table-export.js、tableExport.js、FileSaver.min.js、xlsx.core.min.js引入下载页面 修改bootstrap-table-export.js文件里...
  • 最终解决:bootstrapTable 导出全部数据。

    万次阅读 热门讨论 2018-10-19 10:49:55
    原文地址: http://www.5ixiudou.com/portal/detailInfo/1000000005/228 受备案影响,原网页可先访问:... 一、问题描述: 1.在工作中,人们比较喜欢用 bootstrapTable 进行数据的展示...

    原文地址:

    http://www.5ixiudou.com/portal/detailInfo/1000000005/228

    受备案影响,原网页可先访问:http://106.12.198.137:8080/portal-web/portal/detailInfo/1000000005/228

    一、问题描述:
        1.在工作中,人们比较喜欢用 bootstrapTable 进行数据的展示,而且有导出数据到excel中的需求。
        2.bootstrapTable导出数据可以使用 Table Export 插件。https://www.cnblogs.com/evilliu/articles/6424237.html,主要引入两个文件:bootstrap-table-export.js 和 tableExport.js。但是这个导出是有问题的,只能导出当前页的数据,不能导出查询出来的数据的全部页的数据。关于这个问题,网上有一些解决方案,比如设置 exportDataType:'all',也是不能导出全部数据的。

    二、方案选择
        对于 bootstrapTable,如果想要导出全部数据的话,有两种方案:
        1.前台分页过程中,添加"ALL"的分页,然后前台加载全部数据到当前页中,然后导出当前页的数据。
        2.将导出的过程放到后台去执行,前台只用传递查询条件、excel 表头信息到后台,由后台去查询、拼装、导出即可。
        对于方案1,首先前台加载大量数据的话,渲染会非常慢,甚至僵死超时,更不用说导出还要消耗更长的时间,所以该方案不合适。
        对于方案2,前台不用做特殊操作,将导出的业务过程放到后台,不会对前台的信息展示产生任何影响,可行性高。
        最终选择方案2.
        
    三、方案执行过程(亲测可用)
        1.所需资源文件:

    资源文件下载:

      http://www.5ixiudou.com/portal/detailInfo/1000000005/228

     注意:要使用新版本的bootstrap-table.js文件。


        2.核心代码:
        
        js 部分:
        //导出全部查询数据
        function exportExcelForAll(){
            var formData = {
                startDateStr:$("#startDate").val(),
                endDateStr:$("#endDate").val(),
            };

            //导出所有数据
            $.exportAllData4BootstrapTable({
                tableId: "ivrRecord_table",
                fileName: "全部数据导出",
                sheetName: "全部数据导出",
                url: $.basePath + "/demo/exportAllData.htm",
                queryParam: formData
            });
        }
        
        
        //初始化 bootstrapTable
        $('#demo_table').bootstrapTable({
                toolbar: "#u_tableToolbar",
                url:'${basePath}/demo/getDemoDataJson.json',
                queryParams:function (params) {
                    var searchText=params.search;
                    if(searchText==undefined){
                        searchText="";
                    }
                    return {
                        limit: params.limit,
                        offset: params.offset,
                        startDateStr:$("#startDate").val(),
                        endDateStr:$("#endDate").val(),
                    };
                },
                contentType:"application/x-www-form-urlencoded; charset=UTF-8",
                sortable: false,
                search: true,              //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
               // searchOnEnterKey: true, //回车查询
                strictSearch: true,         //设置为 true启用 全匹配搜索,否则为模糊搜索
                showColumns: true,          //是否显示所有的列
                showRefresh: true,          //是否显示刷新按钮
                method: 'POST',
                striped: true,
                sidePagination: "server",
                pagination:true,
                pageNumber:1,
                pageSize: 10,

                pageList: [10, 25, 50, 100,200,500,1000,2000,3000, 'ALL'],
                columns: [
                    {title: '${getCodeDesc('VIEWS.IVR','CALL_SERIAL_LOCAL','标志号')}', field: 'pid', align: 'center', valign: 'middle',sortable: true,width:'170px'},
                    {title: '${getCodeDesc('VIEWS.MODEL','START_DATE_LOCAL','接入时间')}', field: 'beginTime', align: 'center', valign: 'middle', sortable: true,width:'140px',formatter:formatDate},
                    {title: '${getCodeDesc('VIEWS.MODEL','END_DATE_LOCAL','挂断时间')}', field: 'endTime', align: 'center', valign: 'middle', sortable: true,width:'140px',visible:false,formatter:formatDate},
                ]
            });

        html部分:
        <table id="demo_table"></table>


        后台部分:
        /**
         * 导出全部查询数据
         */
        @RequestMapping(value = "/exportAllData.htm", method = {RequestMethod.POST})
        public void exportAllData(String startDateStr ,String endDateStr, HttpServletRequest request, HttpServletResponse response,String cols, String fileName, String sheetName) throws Exception {

            //防止中文乱码问题
            cols = URLDecoder.decode(cols, "utf-8");
            fileName = URLDecoder.decode(fileName, "utf-8");
            sheetName = URLDecoder.decode(sheetName, "utf-8");

            //根据前台传递过来的查询条件查询所有的数据
            //根据自己的业务需要进行查询,只要获取最后的数list
            DataDemoModel model = new DataDemoModel();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            List<DataDemoModel> list = null;
            if(!StringUtil.isEmpty(startDateStr)){
                model.setStartDate(sdf.parse(startDateStr));
            }
            if(!StringUtil.isEmpty(endDateStr)){
                model.setEndDate(sdf.parse(endDateStr));
            }
            list = demoService.findAllDataByCondition(model);

            //根据获取的数据导出到文件中
            ExcelTemplate excel = new ExcelTemplate();
            excel.setFileName(fileName).createNewSheet(sheetName);
            //设置标题数据和表格数据
            excel.addTitleList(new ColumnData(cols)).addGridList(list);
            excel.writeExcel(response);

        }
        
        3.关键部分:
        用到了后台导出excel模板插件 ExcelTemplate,需要向模板中传递文件名称 fileName ,sheet页名称 sheetName,excel标题信息 cols,数据list。
        

    更多内容请关注我的个人网站:http://www.5ixiudou.com,大家共同学习,共同进步。

    展开全文
  • 直接将html里table导出为excel文件

    千次阅读 2019-10-15 14:18:57
    * table导出为excel并下载到本地 * @tableList 表格数据(可能存在多张表的情况)例如: [{id: 'myTab', name: 'sheet'}] * @fileName 下载的文件名称 */ tableToExcel ( tableList , fileName ) { let...
  • bootstrap table导出表格数据

    千次阅读 2018-04-04 16:45:56
    最近最报表某些需求只导出本页面数据,于是就尝试了一下前端导出,使用的bootstrap Table导出,顺便学习了一下bootstrap Table,最终效果图如下 测试项目使用springbot+mybatis+templeaf,\ bootstrap官网有示例...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 206,524
精华内容 82,609
关键字:

table导出