纯web前端/vue.js页面实现excel表格的生成导出

如果你只是想在web页面或vue的页面生成带样式的excel的表格,看这一篇就够了。在接到公司这个需求之后,查阅了大量的资料,最后还是写出来了。实现原理没有其他人写的那么麻烦,只需要引入两个包,这个需求就可实现。闲话少说,直接上代码!

1、第一步下载两个npm包依赖

npm i xlsx -S

npm i xlsx-style -S

这两个包第一个是导出excel用的,第二个是修改生成excel样式用的。

web页面直接引入两个文件中的 xlsx.full.min.js 文件就可以,如下

2、第二步开始绑定事件


通过点击事件传递实参给底下生产excel的方法,materialDetailArr是我接收mapGetters取到的后台的表格的数据,

a标签没有样式,起到链接下载的作用。

首先声明两个全局变量 tmpDown、wopts

let tmpDown;

const wopts = { bookType: "xlsx", bookSST: true,type: "binary",  cellStyles: true};



//接下来几个方法 vue直接在methods对象里写

saveAs方法是a标签链接的方法


saveAs(obj, fileName) {

      var tmpa = document.createElement("a");

      tmpa.download = fileName || "未命名";

      // 兼容ie

      if ("msSaveOrOpenBlob" in navigator) {

        window.navigator.msSaveOrOpenBlob(obj, "下载的文件名" + ".xlsx");

      } else {

        tmpa.href = URL.createObjectURL(obj);

      }

      tmpa.click();

      setTimeout(function() {

        URL.revokeObjectURL(obj);

      }, 100);

    },

```

//生成表格的方法

```
downloadExl(json, type) {

      let that = this;//控制this指向

   // 遍历数据key值,获得表格表头

      //   var tmpdata = json[0];

      // json.unshift({});

     //  var keyMap = []; //获取keys

      //   for (var k in tmpdata) {

       //   keyMap.push(k);

        //   console.log(keyMap)

        //  json[0][k] = k;

      //   }

```

//或者key值直接把所有key值赋给keyMap

//比如这样 let  keyMap=[aaa,bbb,ccc] ,这样的话注释掉上面的循环代码就可以

```

        var tmpdata = []; //用来保存转换好的json

        json

          .map((v, i) =>

            keyMap.map((k, j) =>

              Object.assign(

                {},

                {

                  v: v[k],

                  position:

                    (j > 25

                      ? that.getCharCol(j)

                      : String.fromCharCode(65 + j)) +

                    (i + 1)

                }

              )

            )

          )

          .reduce((prev, next) => prev.concat(next))

          .forEach(

            (v, i) =>

              (tmpdata[v.position] = {

                v: v.v

              })

          );

        var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10

        var tmpWB = {

          SheetNames: ["mySheet"], //保存的表标题

          Sheets: {

            mySheet: Object.assign(

              {},

              tmpdata, //内容

              {

                "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //设置填充区域

                "!cols": [

                  { wpx: 325 }, //生成表格每一列宽度,这里只写两个wpx例子

                  { wpx: 135 }

                ],

                A1: {//给每列的第一行,也就是表头设置名称 样式。A1到 N1

                  v: "磅房名称",//生成表格表头另命名,可以覆盖上边的keyMap 二者不冲突

                  t: "s",

                  s: {

                    font: {

                      sz: 13, //字体

                      bold: true//加粗

                    },

                    fill: {

                      fgColor: {

                        rgb: "58b7ff" //背景颜色

                      }

                    },

                    alignment: {

                      horizontal: "center"//居中

                    }

                  }

                },

                B1: {

                  v: "材料名称",

                  t: "s",

                  s: {

                    font: {

                      sz: 13,

                      bold: true

                    },

                    fill: {

                      fgColor: {

                        rgb: "58b7ff" //背景颜色

                      }

                    },

                    alignment: {

                      horizontal: "center"

                    }

                  }

                },

              }

            )

          }

        };

        tmpDown = new Blob(

          [

            that.s2ab(

              XLSX.write(

                tmpWB,

                {

                  bookType: type == undefined ? "xlsx" : type,

                  bookSST: false,

                  type: "binary"

                } //这里的数据是用来定义导出的格式类型

              )

            )

          ],

          {

            type: ""

          }

        );

        that.saveAs(

          tmpDown,

          "数据表格" +

            "." +

            (wopts.bookType == "biff2" ? "xls" : wopts.bookType)

        );

      } else {

        alert("数据为空");

      }

    },

```


```

// 获取26个英文字母用来表示excel的列

    getCharCol(n) {

      let temCol = "",

        s = "",

        m = 0;

      while (n > 0) {

        m = (n % 26) + 1;

        s = String.fromCharCode(m + 64) + s;

        n = (n - m) / 26;

      }

      return s;

    },

    s2ab(s) {

      if (typeof ArrayBuffer !== "undefined") {

        var buf = new ArrayBuffer(s.length);

        var view = new Uint8Array(buf);

        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;

        return buf;

      } else {

        var buf = new Array(s.length);

        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;

        return buf;

      }

    },

```

以上四个方法,能够成功导出excel的表格


生成效果

你可能感兴趣的:(纯web前端/vue.js页面实现excel表格的生成导出)