javascript前端导出Excel简单写法

IT-Lenjor

已于 2022-07-13 09:39:02 修改

阅读量1.4k

点赞数

文章标签： javascript 前端开发语言

于 2022-07-12 18:12:05 首次发布

原文链接：https://blog.csdn.net/dark_cy/article/details/122114517

版权

前端开发 Excel导出数据格式表格 HTML模板

关键词由CSDN通过智能技术生成

方法一：

/**
 * 导出表格数据到 Excel 文件
 * @param {Array} tableData - 表格数据
 * @param {Array} fieldLabels - 表头组成的数组
 * @param {Array} fieldKeys - 列属性名组成的数组
 * @param {String} fileName - 导出的文件名
 */
function exportExcel(tableData, fieldLabels, fieldKeys, fileName) {
  let dataStr = fieldLabels.toString() + '\r\n';
  tableData.forEach(item => {
      fieldKeys.forEach(key => {
          // 加引号是为了使换行符在单元格内正常显示 
          dataStr += `"${item[key]}"\t,`;
      });
      dataStr += '\r\n';
  });
  
  // encodeURIComponent 解决中文乱码
  const url = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName + ".xls";
  link.style.display = 'none';
  link.click();
}

为了让单元格中的数据不被转换格式（如过大的数字会被转为科学技术法显示），需要在数据后面加多余的字符，如以上代码的 \t。
long类型会有被截取的情况，导致精度不对

方法二：通过 HTML 导出 Excel 【推荐使用】

function exportExcel(tableData, fieldKeys, fieldLabels, fileName){
    // 用于替换数据中的换行符，是其可以在单元格内正常显示
    const wrapMark = '<br style="mso-data-placement:same-cell;"/>';

    // 设置单元格数据显示为文本格式，避免过大的数字以科学计数法的形式显示
    const tdTagHeader = `<td style="mso-number-format:'\@'">`;

    let dataStr = '<tr>'

    fieldLabels.forEach(label => {
      dataStr += `${tdTagHeader + label}</td>`;
    })

    dataStr += '</tr>';
    tableData.forEach(item => {
        dataStr += '<tr>'
        fieldKeys.forEach(key => {
            // 这种方式本质是导出 html 文件，html 中连续的空格符会被合并成一个显示
            // replace(/ /g, '&nbsp;') 将空格符替换成 &nbsp; 使其可以正常显示
            dataStr += tdTagHeader + `${item[key]}`.replace(/ /g, '&nbsp;').replace(/\n/g, wrapMark) + '</td>';
        });
        dataStr += '</tr>'
    })

    //设置 Worksheet 名
    const workSheet = 'Sheet1'

    const 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><meta charset="UTF-8" />
    <!--[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>${dataStr}</table></body></html>`;

    const url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template))) ;
    const link = document.createElement("a");

	link.href = url;
	link.download = fileName + ".xls";
	link.style.display = 'none';
	link.click();
}

测试数据

const tableData =  [
          { id: 874311049969889280, date: '2021-08-09 15:19:58.226000', manager: '王小虎', address: '蝙蝠山种猪场 工程' },
          { id: 930129881019613184, date: '2022-01-10 16:04:04.612000', manager: '张小星', address: '德邦场 工程' },
          { id: 873293464263864320, date: '2021-08-06 19:56:26.888000', manager: '刘小备', address: '牛栏山种 猪场' },
          { id: 951031816474943488, date: '2022-03-09 08:20:54.364000', manager: '赵小云', address: '瓦塘种 猪场(仁隆场)' }
      ]
      fieldKeys = ['id', 'date', 'manager', 'address'],
      fieldLabels = ['ID', '日期', '负责人', '地址'],
      fileName = '测试文件';
      
exportExcel(tableData, fieldLabels, fieldKeys, fileName);