如何使用原生js实现导出的效果

简介: 如何使用原生js实现导出的效果

这是我的一个朋友发我的 给大家分享一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    <button id="" type="button" class="importBtn">
      <i></i> 导出</button>
    <script type="text/javascript">
      let data = [{
          "name": "张三一",
          "gender": "女",
          "age": "22",
          "record": "初中及以下",
          "employment": "长期派遣",
          "level": "一档2级",
          "item": "河南铁路",
          "status": "在职"
        },
        {
          "name": "张三",
          "gender": "男",
          "age": "18",
          "record": "高中",
          "employment": "学员",
          "level": "一档2级",
          "item": "河南铁路",
          "status": "在职"
        },
        {
          "name": "王五",
          "gender": "男",
          "age": "22",
          "record": "大学",
          "employment": "长期派遣",
          "level": "一档1级",
          "item": "电路",
          "status": "在职"
        }
      ]
      $(".importBtn").on('click', function() {
        var tableData = [];
        console.log(data);
        tableData = data;
        downLoadExcel(tableData, '工资社保管理')
      })
      function 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_data = document.createElement("a");
        link_data.href = uri;
        //对下载的文件命名
        link_data.download = `${fileName || '表格数据'}.xls`;
        document.body.appendChild(link_data);
        link_data.click();
        document.body.removeChild(link_data);
      }
    </script>
  </body>
</html>
相关文章
|
8月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
238 3
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
356 0
|
12月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
237 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
126 0
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
122 0
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
119 5
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
JavaScript
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
196 2