专栏首页前端开发随笔Js实现list导出为excel表格

Js实现list导出为excel表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="exportEx()">导出excel表格</button>
</body>
<script>
    var tableData = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
    }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
    }]

    function exportEx() {
        let str = `时间,姓名,地址\n`;
        var jsonData = tableData
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i in jsonData) {
            for (let j in jsonData[i]) {
                str += `${jsonData[i][j] + '\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 = "文件.xls";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序可移动浮窗

    wePanda
  • Js Promise的基础使用

    wePanda
  • Js时间戳倒计时天时分秒

    wePanda
  • 人工智能与个性化学习

    自从2016 年,开启了人工智能时代元年后,云计算、大数据、积层神经网络、深度学习带来的人工智能展现在大众面前。随着技术的突破,成本的下降和应用的普及,巨头们纷...

    企鹅号小编
  • Spring中的18个注解,你会几个

    标识一个该类是Spring MVC controller处理器,用来创建处理http请求的对象.

    java架构师
  • 翻译 | Thingking in Redux(如果你只了解MVC)

    作者:珂珂(沪江前端开发工程师) 本文原创,转载请注明作者及出处。 原文地址:https://hackernoon.com/thinking-in-red...

    iKcamp
  • JavaEE基础(03):Http请求详解,握手挥手流程简介

    地址:http://localhost:6003/servletOneImpl?userName=cicada

    知了一笑
  • GoWeb基础——Text/HTML模板

    {{}}来包含需要在渲染时被替换的字段,{{.}}表示当前的对象 如果要访问当前对象的字段通过{{.FieldName}},但是需要注意一点:这个字段必须是导...

    羊羽shine
  • 程序员办公桌都是这么霸气的吗?扫码改需求?

    程序员初入职场,办公桌上可能就一台电脑,一个键盘,一个鼠标,还有就是一个水杯。然而对于老程序员们来说,各式各样你想不到的物件,简直是让人叹为观止!

    Java帮帮
  • 程序员如何在百忙之中不走岔路,不白忙!

    程序员忙,似乎是个公论,有些程序员甚至会认为,不忙的程序员无法快速地进步,从而会落伍。或者说,不忙的程序员有可能被公司末尾淘汰掉。对此,一直危机感很重的我深以为...

    哲洛不闹

扫码关注云+社区

领取腾讯云代金券