tags: [组件]
categories: 业务场景解决方案

需求：datatable表格，每一行带有checkbox，勾选checkbox导出当前行所有数据，全选则导出所有选中行的数据
即实现导出列表选中行数据的功能

  1. <a class="download" download="用户列表">导出</a>
  1. function exportFile() {
  2.     var dataArr = [];//定义数组用来保存所勾选的列表当前行数据
  3.     // 定义表头
  4.     var str = `<tr>
  5.         <th>样本名称</th>
  6.         <th>问卷编码</th>
  7.         <th>提交时间</th>
  8.     </tr>`
  9.     // 遍历列表中所购选中的行
  10.     $('table').find('tr.hover-bg').each(function() {
  11.         var Data = new Object();
  12.         Data.AreaName = $(this).find('td:eq(1)').html();
  13.         Data.DataID= $(this).find('td:eq(2)').html();
  14.         Data.EntryTime= $(this).find('td:eq(3)').html();
  15.         dataArr.push(Data);
  16.     })
  17.     if($('table').find('tr').hasClass('hover-bg')) {
  18.         //循环遍历，每行加入tr标签，每个单元格加td标签
  19.         for (let i = 0; i < dataArr.length; i++) {
  20.             str += '<tr>';
  21.             for (let item in dataArr[i]) {
  22.                 //增加\t为了不让表格显示科学计数法或者其他格式
  23.                 str += `<td>${ dataArr[i][item] + '\t'}</td>`;
  24.             }
  25.             str += '</tr>';
  26.         }
  27.         var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
  28.                           xmlns:x="urn:schemas-microsoft-com:office:excel"
  29.                           xmlns="http://www.w3.org/TR/REC-html40">
  30.                           <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
  31.                             <x:Name>'录入列表.xls'</x:Name>
  32.                             <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
  33.                             </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
  34.                             </head><body><table>${str}</table></body></html>`;
  36.         // 实例化一个 Blob 对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
  37.         var blob = new Blob([template], {type: "application/vnd.ms-excel"});
  38.         $('.download').attr('href', URL.createObjectURL(blob));
  39.     }
  40. }

SheetJS

同时适用于Browser/Nodejs环境的电子表格编辑库，主要功能包括：

  • 读取并解析Excel文件

  • 编辑表格内容

  • 将数据以Excel文件形式导出