美文网首页
vue 导出excel自定义样式添加超链接

vue 导出excel自定义样式添加超链接

作者: Jiao_0805 | 来源:发表于2019-06-25 19:39 被阅读0次

import Excel from 'exceljs/dist/exceljs.min.js';

Vue.prototype.$Excel = Excel;

man.js导入模块

methods

    exportExcel() {

      let param = Object.assign({}, this.filters);

      if (param.appVersionName.includes("all")) {

        param["appVersionName"] = this.versions;

      }

      param["page"] = 0;

      param["pageSize"] = 0;

      param["sortCond"] = store.getters.io_filters.sortCond;

      param["sortOrder"] = store.getters.io_filters.sortOrder;

      let time = this.addDay(this.timeRange[1]);

      param["startDate"] = this.timeRange[0];

      param["endDate"] = time;

      this.$axios

        .post("/api/v1/io/category", param)

        .then(response => {

          if (response.data.code == 1) {

            let res = response.data.data.data;

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

              let resarr = res[i].type.split(",");

              let arr = [];

              // delete res[i].appName;

              // delete res[i].md5;

              // delete res[i].modifier;

              // delete res[i].dealTime;

              if (res[i].updateTime) {

                res[i].updateTime=res[i].updateTime.split('.')[0];

              }

              res[i].createTimeMax=res[i].createTimeMax.split('.')[0];

              // console.log(res[i].updateTime)

              switch (res[i].status) {

                case -1:

                  res[i].status = "未处理";

                  break;

                case 0:

                  res[i].status = "处理中";

                  break;

                case 1:

                  res[i].status = "已解决";

                  break;

                case -2:

                  res[i].status = "无效问题";

                  break;

                case 2:

                  res[i].status = "无效问题";

                  break;

                default:

                  break;

              }

              for (let index = 0; index < resarr.length; index++) {

                switch (resarr[index]) {

                  case "1":

                    arr.push("主线程IO");

                    break;

                  case "2":

                    arr.push("读写buffer过小");

                    break;

                  case "3":

                    arr.push("重复读文件");

                    break;

                  case "4":

                    arr.push("关闭泄露");

                    break;

                  default:

                    break;

                }

              }

              res[i].type = arr.toString();

            }

            this.saveAsExcel(res);

            // let workbook = new this.$Excel.Workbook();

            // const ws = this.$XLSX.utils.json_to_sheet(res);

            // const wb = this.$XLSX.utils.book_new();

            // ws.A1.l={Target:'https://www.baidu.com',Tooltip:"Find us @ SheetJS.com!"}

            // ws.A1.s= { font: {underline: true }};

            // console.log(ws.A1)

            // console.log(wb)

            // this.$XLSX.utils.book_append_sheet(wb, ws, "excel");

            // let wbout =  this.$XLSX.writeFile(wb,"io.xlsx");

          } else {

            this.$message.error(

              "请求错误,错误信息:" + JSON.stringify(response.data.msg)

            );

          }

        })

        .catch(error => {

          this.$message.error("请求错误,错误信息:" + JSON.stringify(error));

        });

    },

    async saveAsExcel(data) {

      //cell style

      var fills = {

        solid: {

          type: "pattern",

          pattern: "solid",

          fgColor: { argb: "32a77e" }

        }

      };

      //create a workbook

      var workbook = new this.$Excel.Workbook();

      //add header

      var ws1 = workbook.addWorksheet('io数据列表', {properties:{tabColor:{argb:'FFC0000'}}});

      ws1.properties.defaultRowHeight = 50;

      ws1.columns = [

        { header: 'I/O数据列表', style: { font: { size:12 } } },

      ];

      ws1.addRow(["ID", "异常类型","异常数量","异常场景","版本","状态","备注","责任人","上报时间","更新时间","修复版本号"]);

      ws1.getRow(1).font={size: 18, bold: true };

      ws1.getRow(1).fill=fills.solid;

      ws1.getRow(1).height = 50;

      ws1.getRow(2).fill=fills.solid;

      ws1.getRow(2).height = 50;

      ws1.getRow(2).font={ name: 'Comic Sans MS', family: 4, size: 15, bold: true };

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

        let arr=[]

        arr.length=11

        arr[0]=data[i].id

        arr[1]=data[i].stack

        arr[2]=data[i].count

        arr[3]=data[i].type

        arr[4]=data[i].appVersionName

        arr[5]=data[i].status

        arr[6]=data[i].mark

        arr[7]=data[i].persons

        arr[8]=data[i].createTimeMax

        arr[9]=data[i].updateTime

        arr[10]=data[i].repairVersion

        ws1.addRow(arr);

        ws1.getRow(i+3).height = 50;

        if (data[i].status=="已解决") {

          ws1.getCell('F'+(i+3)).font={color:{argb: "32cd32"}};

        }else{

          ws1.getCell('F'+(i+3)).font={color:{argb: "ff0000"}};

        }

        ws1.getCell('B'+(i+3)).font={color:{argb: "0000ff"},underline:"single",  italic: true};

        let str ="http://localhost:9090/io/ioDetail?filters=" +  Base64.encode(JSON.stringify(this.filters)) +"&";

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

          str += "time=" + this.timeRange[i] + "&";

        }

        str += "appVersionName=" + data[i].appVersionName + "&";

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

          str += "versions=" + this.versions[i] + "&";

        }

        str += "md5=" + data[i].md5 + "&";

        str += "id=" + data[i].id;

        ws1.getCell('B'+(i+3)).value={text: data[i].stack,hyperlink: str,tooltip: 'www.mylink.com'}

      }

      ws1.mergeCells("A1:K1");

      this.rowCenter(ws1, 1, data.length+2);

      this.colWidth(ws1, 11, 20);

      ws1.getColumn(2).width = 30;

      const buf = await workbook.xlsx.writeBuffer();

      saveAs(new Blob([buf]), "I/O数据列表.xlsx");

    },

    //设置 start-end 行单元格水平垂直居中/添加边框

    rowCenter: function(arg_ws, arg_start, arg_end) {

      for (let i = arg_start; i <= arg_end; i++) {

        arg_ws.findRow(i).alignment = {

          vertical: "middle",

          horizontal: "center"

        };

        //循环 row 中的 cell,给每个 cell添加边框

        arg_ws.findRow(i).eachCell(function(cell, index) {

          cell.border = {

            top: { style: "thin" },

            left: { style: "thin" },

            bottom: { style: "thin" },

            right: { style: "thin" }

          };

        });

      }

    },

    //设置 start-end 列的宽度

    colWidth: function(arg_ws, arg_cols, arg_width) {

      for (let i = 1; i < arg_cols+1; i++) {

        if (i==2) {

          arg_ws.getColumn(i).width = 50;             

        }else{

          arg_ws.getColumn(i).width = arg_width;   

        }

      }

    }

相关文章

网友评论

      本文标题:vue 导出excel自定义样式添加超链接

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