js前端生成excel文件(表格)并下载

最新推荐文章于 2025-03-26 15:35:50 发布

gqkmiss

最新推荐文章于 2025-03-26 15:35:50 发布

阅读量7.4k

点赞数 10

分类专栏： javascript 下载下载表格文章标签： js 前端下载下载表格 javascript

本文链接：https://blog.csdn.net/guoqiankunmiss/article/details/102609250

版权

javascript 同时被 3 个专栏收录

67 篇文章

订阅专栏

下载

1 篇文章

订阅专栏

下载表格

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript在前端生成Excel文件（实际上是CSV格式）的方法，并提供了如何将生成的文件下载到本地的完整示例代码。该方法适用于将后台返回的数据转化为表格形式，并允许用户直接下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js前端生成excel文件(表格)并下载

后台返回一段数据，前端遍历生成表格下载

downLoadExcel (data, fileName) {
    //定义表头
    let str = `用户名,时间,坐标,来源,授权时间\n`;
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < data.length ; i++ ){
        for(let item in data[i]){
            str+=`${data[i][item] + '\t'},`;     
        }
        str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    let link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download = `${fileName || '表格数据'}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
},
clickDown () {
	let tableData = [{
        name: '你好啊',
        time: 130000000000,
        pre: '127.130',
        source: '淘宝',
        otherTime: 1571276232000
    }, {
        name: '2你好啊',
        time: 5130000000000,
        pre: '127.130',
        source: '淘宝',
        otherTime: 41571276232000
    }, {
        name: '3你好啊',
        time: 3130000000000,
        pre: '127.130',
        source: '淘宝',
        otherTime: 21571276232000
    }]
    this.downLoadExcel(tableData, '测试数据')
}