javascript将JSON数据导出为Excle表格

最新推荐文章于 2024-09-19 17:31:29 发布

碳酸金鱼。

最新推荐文章于 2024-09-19 17:31:29 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 文章标签： javascript json html

本文链接：https://blog.csdn.net/weixin_43842373/article/details/120548587

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

- 方式一：导出json数据
- 方式二：直接导出HTML表格

方式一：导出json数据

const jsonData = [
    {
        name:'路人甲',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'炮灰乙',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'土匪丙',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'流氓丁',
        phone:'123456789',
        email:'000@123456.com'
    },
];

/**
 * 导出 json 数据为 Excle 表格
 * @param {json} data 要导出的 json 数据 
 * @param {String} head 表头, 可选 参数示例：'名字,邮箱,电话'
 * @param {*} name 导出的文件名, 可选
 */
function jsonToExcel(data, head, name = '导出的文件名') {
    let str = head ? head + '\n' : '';
    data.forEach(item => {
    	// 拼接json数据, 增加 \t 为了不让表格显示科学计数法或者其他格式
        for(let key in item) {
            str = `${str + item[key] + '\t'},`
        }
        str += '\n'
    });
    console.log(str)
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
     // 通过创建a标签实现
     const link = document.createElement("a");
     link.href = uri;
     // 对下载的文件命名
     link.download =  `${name + '.csv'}`;
     link.click();
}

运行函数并传入参数如下

jsonToExcel(jsonData, "姓名,电话,邮箱")

最后拼接成的str数据如下：

姓名,电话,邮箱
路人甲	,123456789	,000@123456.com	,
炮灰乙	,123456789	,000@123456.com	,
土匪丙	,123456789	,000@123456.com	,
流氓丁	,123456789	,000@123456.com	,

导出后效果如下：
在这里插入图片描述

方式二：直接导出HTML表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导出excel实例</title>
</head>
<body>
    <table id="data">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </table>
 <button onclick = "jsonToExcel('#data')">导出数据</button>
</body>
<script>
    function jsonToExcel(id, name = '导出的文件名') {
        // 获得表格数据的html标签和文本d;
        var html = "<html><head><meta charset='UTF-8'></head><body>"+document.querySelector(id).outerHTML+"</body></html>";
        // 创建一个Blob对象，第一个参数是文件的数据，第二个参数是文件类型属性对象
        var blob = new Blob([html],{type:"application/vnd.ms-excel"});
        // 通过创建a标签实现
        const link = document.createElement("a");
        // 利用URL的createObjectURL方法为 a 元素生成 blobURL
        link.href = URL.createObjectURL(blob);
        // 设置文件名
        link.download =  `${name}`;
        link.click();
    }
</script>
</html>