vue + iview 导出自定义表格数据（不下载插件）

最新推荐文章于 2022-11-26 17:31:09 发布

氪精大佬

最新推荐文章于 2022-11-26 17:31:09 发布

阅读量672

点赞数

分类专栏：个人学习 iview 前端

本文链接：https://blog.csdn.net/weixin_44000275/article/details/110391378

版权

javascript vue excel

个人学习同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

iview

3 篇文章 0 订阅

订阅专栏

前提条件

1、表格数据为json数据
2、本篇实际上与iview无关，本质上是导出页面table,只是数据的结构与iview一样
3、如果要使用需对js中的一些东西稍加改动，大部分不需要,如果数据类型和我这里的一样，那么不用任何修改，直接拷贝拿过去用就行了。

代码奉上

1、html

<template><div></div></template>

2、js

data(){
return{
   columns:[],
   data:[]
}
}

methods:{
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },
    format(s, c) {
      return s.replace(/{(\w+)}/g, function (m, p) {
        return c[p];
      });
    },
        exportData() {
      var uri = "data:application/vnd.ms-excel;base64,";
      var headit =
        '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"><head><meta charset="UTF-8"><!--[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>';

      var bodyit = "";
      var footit = "</table></body></html>";
      var myTabValue = []; //表格二维数组
      // 添加标题
      bodyit +=
        '<tr><td align="center" colspan="' +
        this.columns.length +
        '">' +
        this.filename +
        "</td></tr>";

      // 添加表头
      var ary = [];
      for (var it of this.columns) {
        ary.push(it.title);
      }
      myTabValue.push(ary);
      //添加表格数据
      for (var item of this.data) {
        var lAry = [];
        for (var ite of this.columns) {
          lAry.push(item[ite.key]);
        }
        myTabValue.push(lAry);
      }

      // 渲染表格
      for (var i of myTabValue) {
        bodyit += "<tr>";
        for (var ii of i) {
          bodyit += "<td>" + ii + "</td>";
        }
        bodyit += "</tr>";
      }
      for (var myI of myFo) {
        bodyit +=
          '<tr><td align="left" colspan="' +
          this.columns.length +
          '">' +
          myI +
          "</td></tr>"+"<tr></tr>";
      }
      var template = headit + bodyit + footit;
      var ctx = { worksheet: this.filename, table: template };
      document.getElementById("dlink").href =
        uri + this.base64(this.format(template, ctx));
      document.getElementById("dlink").download = this.filename + ".xls";
      document.getElementById("dlink").click();
    },
}

最后：调用exportData这个函数直接用就ok了

氪精大佬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue + iview 导出自定义表格数据（不下载插件）

前提条件1、表格数据为json数据2、本篇实际上与iview无关，本质上是导出页面table,只是数据的结构与iview一样3、如果要使用需对js中的一些东西稍加改动，大部分不需要,如果数据类型和我这里的一样，那么不用任何修改，直接拷贝拿过去用就行了。代码奉上1、html<template><div></div></template>2、jsdata(){return{ columns:[], data:[]}}meth
复制链接

扫一扫