前端导出excel，前端纯数据导出excel

已于 2023-08-11 16:39:33 修改
阅读量880 收藏 2
点赞数
分类专栏： JavaScript 文章标签： 前端 excel
于 2023-08-11 16:17:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1832729975/article/details/132234497
版权

非常符合前端直接的使用

使用

先看看使用

表格数据

const tableData = [
  {
    "id": 1,
    "firstName": "John",
    "lastName": "Doe",
    "email": "john.doe@example.com",
    "age": 28,
    "address": { "street": "123 Main St", "city": "Springfield", "state": "IL", "zip": "62701" }
  },
  {
    "id": 2,
    "firstName": "Jane",
    "lastName": "Smith",
    "email": "jane.smith@example.com",
    "age": 34,
    "address": { "street": "456 Elm St", "city": "Shelbyville", "state": "IL", "zip": "62565" }
  },
  {
    "id": 3,
    "firstName": "Bob",
    "lastName": "Johnson",
    "email": "bob.johnson@example.com",
    "age": 23,
    "address": { "street": "789 Oak St", "city": "Ogdenville", "state": "IL", "zip": "62075" }
  }
]

使用方法

// 导出方法
exportExcel(
    tableData, // 你的表格数据
    [
      {
        title: 'ID', // 表头
        wpx: 120, // 宽度
        render: row => row.id, // 你要渲染的数据
      },
      {
        title: '邮箱', // 表头
        render: row => row.email, // 你要渲染的数据
      },
      {
        title: '年龄',
        wpx: 120,
        render: row => (row.age < 18 ? '未成年' : '成年了'),
      },
      {
        title: '地址',
        wpx: 300,
        render: row => row.address.street + '/' + row.address.city,
      },
    ],
    '用户数据.xlsx' // 导出的表名
  )

封装

我们使用 xlsx 库的导出 Excel 功能

  1. 使用表格数据: tableData 作为数据源，你通过一个配置对象数组定义了如何渲染每一列。每个配置对象包括表头、宽度和渲染函数等信息。

  2. 渲染函数: 通过 render 函数，你可以对每一行的数据进行自定义渲染，例如年龄列的情况，你区分了未成年和成年人。

  3. 列宽度: 通过 wpx 属性，你可以为每一列设置特定的宽度。

  4. 动态导入: 你使用了动态导入 (import('xlsx').then(XLSX => {...})) 来导入 xlsx 库，这有助于代码分割和按需加载，提高了前端应用的性能。

  5. 文件名: 导出的文件名可以作为函数的参数传入，使其具有更好的灵活性。

安装xlsx

npm install xlsx -S

获取列名

通过 getColumnName来

function getColumnName(n) {
  let columnName = "";
  while (n > 0) {
    const index = (n - 1) % 26;
    columnName = String.fromCharCode(65 + index) + columnName;
    n = Math.floor((n - 1) / 26);
  }
  return columnName;
}

 getColumnName(1) // 返回 'A'
 getColumnName(27) // 返回 'AA'

获取文本的宽度，用来给列的，要不然会出现列没有宽度的情况

const getWordCh = (val) => {
  /* 先判断是否为null/undefined */
  // eslint-disable-next-line eqeqeq
  if (val == null) {
    return 10;
  } else if (val.toString().charCodeAt(0) > 255) {
    /* 再判断是否为中文 */
    return val.toString().length * 2;
  } else {
    return val.toString().length;
  }
};

导出封装

import("xlsx") 动态引入 xlsx

const exportExcel = (dataSource, columns, filename) => {
   
  import("xlsx").then((XLSX) => {
    const sheet = {};

    const defaultColumnCh = new Array(columns.length || 2);
    const cols = [];
    columns.forEach((item, index) => {
      const letter = getColumnName(index + 1);
      sheet[`${letter}1`] = { v: item.title };
      defaultColumnCh[index] = 0;
    });

    dataSource.forEach((item, rowIndex) => {
      columns.forEach((column, columIndex) => {
        // @ts-ignore next-line
        const value = column.render ? column.render(item) : item[column.field];
        const letter = getColumnName(columIndex + 1);
        sheet[letter + (rowIndex + 2)] = { v: value };

        defaultColumnCh[columIndex] = Math.max(
          defaultColumnCh[columIndex] || 0,
          getWordCh(value)
        );
      });
    });

    columns.forEach((item, index) => {
      // @ts-ignore next-line
      const { render, title, field, ...ret } = item;
      cols.push({
        wch: Math.max(defaultColumnCh[index] || 0, getWordCh(title)),
        ...ret,
      });
    });

    // 获取所有单元格的位置
    const outputPos = Object.keys(sheet);
    // 计算出范围 ,["A1",..., "H2"]
    const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;
    sheet["!cols"] = cols;
    sheet["!ref"] = ref;

    console.log(" sheet: ", sheet);
    // 导出 Excel
    XLSX.writeFileXLSX(
      {
        SheetNames: ["Sheet1"],
        Sheets: {
          Sheet1: sheet,
        },
      },
      filename
    );
  });
};

完整代码


/**
 * 获取列名
 @param {number}n 第几列，从1开始
@example
  getColumnName(1) // 返回 'A'
  getColumnName(27) // 返回 'AA'
 */
function getColumnName(n) {
  let columnName = "";
  while (n > 0) {
    const index = (n - 1) % 26;
    columnName = String.fromCharCode(65 + index) + columnName;
    n = Math.floor((n - 1) / 26);
  }
  return columnName;
}

const getWordCh = (val) => {
  /* 先判断是否为null/undefined */
  // eslint-disable-next-line eqeqeq
  if (val == null) {
    return 10;
  } else if (val.toString().charCodeAt(0) > 255) {
    /* 再判断是否为中文 */
    return val.toString().length * 2;
  } else {
    return val.toString().length;
  }
};

/**
 * 导出excel
 * @example
  exportExcel(
    tableData, // 你的表格数据
    [
      {
        title: 'ID', // 表头
        wpx: 120, // 宽度
        render: row => row.id, // 你要渲染的数据
      },
      {
        title: '邮箱', // 表头
        render: row => row.email, // 你要渲染的数据
      },
      {
        title: '年龄',
        wpx: 120,
        render: row => (row.age < 18 ? '未成年' : '成年了'),
      },
      {
        title: '地址',
        wpx: 300,
        render: row => row.address.street + '/' + row.address.city,
      },
    ],
    '用户数据.xlsx' // 导出的表名
  )
*/
export const exportExcel = (dataSource, columns, filename) => {
  import("xlsx").then((XLSX) => {
    const sheet = {};

    const defaultColumnCh = new Array(columns.length || 2);
    const cols = [];
    columns.forEach((item, index) => {
      const letter = getColumnName(index + 1);
      sheet[`${letter}1`] = { v: item.title };
      defaultColumnCh[index] = 0;
    });

    dataSource.forEach((item, rowIndex) => {
      columns.forEach((column, columIndex) => {
        // @ts-ignore next-line
        const value = column.render ? column.render(item) : item[column.field];
        const letter = getColumnName(columIndex + 1);
        sheet[letter + (rowIndex + 2)] = { v: value };

        defaultColumnCh[columIndex] = Math.max(
          defaultColumnCh[columIndex] || 0,
          getWordCh(value)
        );
      });
    });

    columns.forEach((item, index) => {
      // @ts-ignore next-line
      const { render, title, field, ...ret } = item;
      cols.push({
        wch: Math.max(defaultColumnCh[index] || 0, getWordCh(title)),
        ...ret,
      });
    });

    // 获取所有单元格的位置
    const outputPos = Object.keys(sheet);
    // 计算出范围 ,["A1",..., "H2"]
    const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;
    sheet["!cols"] = cols;
    sheet["!ref"] = ref;

    console.log(" sheet: ", sheet);
    // 导出 Excel
    XLSX.writeFileXLSX(
      {
        SheetNames: ["Sheet1"],
        Sheets: {
          Sheet1: sheet,
        },
      },
      filename
    );
  });
};
zh阿飞
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯前端 JS脚本 导出excel 可动态添加数据
01-11
1：纯前端 2：导出Excel 3：动态添加数据
前端开发篇之一 Excel导出方法汇总
远近
11-13 609
1、插件下载地址 ： 点击下载 2、使用方法 页面引用 excel.min.js 文件 <script src="/js/excel.min.js"></script> var resData = oJson.KeyValue; //设置Excel表头标题 var titleArr = [ '设备区域', '间隔', '设备名',
文件流前端下载
weixin_45283069的博客
02-28 462
// 调用后台下载接口 downFile(fileName).then((res) => { const _res = res; let blob = new Blob([_res], { type: 'application/pdf' }); let downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.hr
Vue前端表格导出Excel文件
m0_59420288的博客
01-30 3470
分享一个Vue前端导出Excel文件的方法。记录学习！
前端VUE+ElementUI导出复杂（多级表头、合并单元格）excel表格 el-table转为excel导出
qq_47945175的博客
07-05 1684
最近遇到一个需求就是统计列表需要前端导出，一开始觉得很难，后来发现不难，网上很多教程都是修改配置文件来操作的，这种方法是直接通过数据导出，所以会觉得麻烦，其实只需要把要导出的表格用el-table渲染出来，然后导出就行了。
前端JS导出Excel表格 可筛选列 table2excel
weixin_46607967的博客
04-06 2090
前端用table2excel.js导出Excel表格
前端页面表格数据实现导出excel（一定看过来呦 有彩蛋）
weixin_52703987的博客
01-11 795
前端JS实现页面表格数据导出excel
前端直接导出Excel文件，超简单！！！。
youyudehan的博客
09-12 952
在前端开发中导出 Excel 可以需要服务端配合，也可以直接拿着数据直接通过 js-export-excel导出 Exce 表格，所以样式和很多东西不能定义，但确确实实那个将数据导出并下载在本地。
vue前端导出Excel.zip
05-22
vue前端导出Excel.zip
前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果
06-23
一个导出excel的demo，包含导出的逻辑代码和依赖包，下载以后请执行 npm install ,然后起服务访问，不能直接以 file：//打开哦
vue纯前端导出Excel
最新发布
02-21
注意： 灵活使用getElementById 和 getElementsByClassName去获取页面元素 tableToExcel(tableId, fileName) { const base64 = s => window.btoa... var excelFile = "<html xmlns:o='urn:schemas-microsoft-co
前端导出Excel table2excel
11-20
前端导出excel，所见即所得，可以设置不导出列，可以设置不导出列，可以设置不导出列，简单方便，注释详细
JavaScript new Function的使用教程
热门推荐
阿飞
10-05 1万+
JavaScript new Function 的使用 new Function， 可以往函数里动态的传递内容， 语法 let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) arg1…是参数，可以有任意个，最后一个参数是函数体 这三个意思相同： new Function('a', 'b', 'return a + b'...
在echarts中使用百度地图，卫星地图
阿飞
05-04 1万+
在echarts中始用百度地图，卫星地图 <!-- 首先引入百度地图 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> <script src="https://api.map.baidu.com/api?v=2....
原生JS动态添加和删除类
阿飞
03-04 3059
原生JS动态添加和删除类 由于需要， 给按钮组监听点击事件(要求用事件委托)，当有一个按钮被点击时，相应的给该按钮添加一个类(激活类)，其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等到一个 dom 对象(也叫dom元素)， 通过document.getElement……的几种方法得到 如` let element = document.getElementById(&amp;quot;box&amp;quot;);...
什么是HTML DOM对象
阿飞
03-10 2307
HTML DOM 对象 HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 HTML DOM Element 对象...
blob 数据保存为文件
阿飞
08-08 844
【代码】blob 数据保存为文件。
JavaScript数组对象方法
阿飞
03-04 473
JavaScript数组常用方法 方法 形式 返回值 是否改变原数组 描述 concat …items: ConcatArray[] 追加之后的数组 否 连接两个或更多的数组，并返回结果。注意concat()方法是拼接两个数组 let arr = [1, 2, 3]; arr.conca...
vue项目中纯前端导出excel文件
07-27
在Vue项目中，你可以使用`xlsx`库来实现纯前端导出Excel文件的功能。下面是一个简单的示例代码： 首先，你需要安装`xlsx`库。在项目的根目录下运行以下命令： ``` npm install xlsx ``` 然后，在需要导出Excel...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值