js表格导出功能

最新推荐文章于 2024-01-09 19:11:05 发布

勿慌

最新推荐文章于 2024-01-09 19:11:05 发布

阅读量115

点赞数

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

本文链接：https://blog.csdn.net/alertloveyou/article/details/116884271

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文档导出功能–Dome

<html>

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

  <input type="file" onchange="upload(0)" id="file">
  <progress value="22" max="100"></progress>
</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>

勿慌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表格导出功能

文档导出功能–Dome<html><head> <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p> <button onclick='tableToExcel()'>导出</button> <input type="file" onchange="upload(0)" id="file"> <progress va
复制链接

扫一扫