导出数据到excel

最新推荐文章于 2024-03-08 16:12:20 发布

XM_12345

最新推荐文章于 2024-03-08 16:12:20 发布

阅读量337

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/XM_12345/article/details/82427864

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

数据导出到excel

文章摘自https://blog.csdn.net/hhzzcc_/article/details/80419396

截图

这里写图片描述

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
    button {
       width:80px;
       height:32px;
       font-size:15px;
       color:#fff;
       background:#64bd63;
       border:none;
       border-radius: 5px;
       outline:none;
       cursor:pointer;
    }
</style>
</head>
<body>
<div id="app">
  <button @click='tableToExcel()' >导出</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    tableData:[{name:'明明',phone: 12345678910,address:'中国'},
              {name:'明明',phone: 12345678910,address:'中国'},
              {name:'明明',phone: 12345678910,address:'中国'},
              {name:'明明',phone: 12345678910,address:'中国'},
              {name:'明明',phone: 12345678910,address:'中国'}]
  },
    methods: {
      tableToExcel() {
          //列标题，逗号隔开，每一个逗号就是隔开一个单元格
         let title = `姓名,电话,地址\n`;

         //增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < this.tableData.length ; i++ ){
          for(let item in this.tableData[i]){
            title+=`${this.tableData[i][item] + '\t'},`;     
          }
          title+='\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/xls;charset=utf-8,\ufeff' + encodeURIComponent(title);
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download =  "json数据表.xls";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

      }

    }
})
</script>
</body>
</html>