美文网首页
前端自己导出表格

前端自己导出表格

作者: 大筒木周助 | 来源:发表于2019-07-13 14:08 被阅读0次

<html>

<head>

  <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>

  <button onclick='tableToExcel()'>导出</button>

</head>

<body>

  <script>

    function tableToExcel(){

      //要导出的json数据

      const jsonData = [

        {

          name:'路人甲',

          phone:'123456',

          email:'123@123456.com'

        },

        {

          name:'炮灰乙',

          phone:'123456',

          email:'123@123456.com'

        },

        {

          name:'土匪丙',

          phone:'123456',

          email:'123@123456.com'

        },

        {

          name:'流氓丁',

          phone:'123456',

          email:'123@123456.com'

        },

      ]

      //列标题

      let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';

      //循环遍历,每行加入tr标签,每个单元格加td标签

      for(let i = 0 ; i < jsonData.length ; i++ ){

        str+='<tr>';

        for(let item in jsonData[i]){

            //增加\t为了不让表格显示科学计数法或者其他格式

            str+=`<td>${ jsonData[i][item] + '\t'}</td>`;   

        }

        str+='</tr>';

      }

      //Worksheet名

      let worksheet = 'Sheet1'

      let uri = 'data:application/vnd.ms-excel;base64,';

      //下载的表格模板数据

      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"

      xmlns:x="urn:schemas-microsoft-com:office:excel"

      xmlns="http://www.w3.org/TR/REC-html40">

      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>

        <x:Name>${worksheet}</x:Name>

        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>

        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->

        </head><body><table>${str}</table></body></html>`;

      //下载模板

      window.location.href = uri + base64(template)

    }

    //输出base64编码

    function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }

</script>

</body>

</html>

相关文章

  • 前端自己导出表格

    使用table标签方式将json导出xls文件 导出 function tableToExcel(){...

  • Quasar 导出的csv中文乱码

    任务:将前端表格导出excel。 前端的表格是Quasar的table组件,官方给出了文件导出的例子。例子是利用 ...

  • vue.js、javascript前端导出excel文件

    (vue.js、javascript导出excel文件,前端导出excel文件) 项目需要导出excel表格,本来...

  • 前端导出CSV表格

    一、直接上结果: 二、功能代码(在这里我把导出CSV这个功能封装成了一个函数,方便后续使用): 三、调用 1.从后...

  • 前端导出excel 表格

    1、场景 一般开发中,下载excel是后端这边放到服务器上,然后读取文件流,然后给接口前端,前端直接下载的不过下载...

  • Angular前端xlsx-style导出Excel

    项目需要在前端导出Excel,数据导出很容易,但是导出表格的样式设置折腾了好久终于搞定。记录如下:1、在Angul...

  • 前端通过后台返回的字符流导出excel表格

    1.平时前端导出excel表格时简单的方式 2.有时候导出需要权限的时候,后台要求在导出的时候要在headers里...

  • GridManager 导出

    GridManager 具有表格数据导出功能,该功能为纯前端实现,对后端无依赖。 1.初始化时指定启用导出功能。方...

  • vue导出功能可视化的方法

    思路 前端调用接口分批获得需要导出的数据 将数据合并,生成excel表格并下载,导出功能实现 用到的依赖库 用到的...

  • 前端实现Excel表格导出

    因为公司需求,要前端实现表格导出,所以折腾了一下csv,上手之后觉得很简单,记录一下。 第一步:上一个a标签,加上...

网友评论

      本文标题:前端自己导出表格

      本文链接:https://www.haomeiwen.com/subject/mjapkctx.html