利用js-xlsx前端導(dǎo)出Excel

muzhuyu 發(fā)布于2019-08-23 12:55 / 1214人閱讀

摘要：由于項目臨時加入導(dǎo)出功能，后臺童靴沒有多余時間來處理，想前端來處理導(dǎo)出。查詢了前端導(dǎo)出方法，大部分是利用來做處理，按照來導(dǎo)出時是沒有樣式處理的。利用數(shù)據(jù)導(dǎo)出拿到后端數(shù)據(jù)，先要對數(shù)據(jù)進行組裝才能導(dǎo)出我們想要的文件格式。

由于項目臨時加入導(dǎo)出Excel功能，后臺童靴沒有多余時間來處理，想前端來處理導(dǎo)出。

查詢了前端導(dǎo)出方法，大部分是利用js-xlsx來做處理，按照js-xlsx來導(dǎo)出excel時是沒有樣式處理的。需要我們來利用該庫的專業(yè)版本才能設(shè)置樣式。

這里就需要xlsx-style來處理，給我們的excel文件來添加樣式。

利用數(shù)據(jù)導(dǎo)出

拿到后端數(shù)據(jù)，先要對數(shù)據(jù)進行組裝才能導(dǎo)出我們想要的文件格式。如果想文件有樣式只能利用xlsx-style;

npm install xlsx-style

拷貝下載下來的文件目錄dist里的xlsx.core.min.js，引入文件

這里借鑒這位博主主要代碼，整理了下，可以實現(xiàn)表頭與導(dǎo)出文件名稱。

具體調(diào)用可以查看DEMO

/**
 * @param {Array} header 表格頭部
 * @param {Array} body 表格數(shù)據(jù)
 * @param {String} title 表格導(dǎo)出名稱
 * @param {Boolean} hasTitle 是否需要表格標(biāo)題
 */
function ExportsEXCL() {
  this.downLoad = ({
    header = [],
    body = [],
    title = "excel",
    hasTitle = false,
  }) => {
    const styleCell = this.setBorderStyle();

    const _headers = header
      .map((v, i) => {
        let key = Object.keys(v);
        return Object.assign(
          {},
          {
            v: `${v[key[0]]}${key[0]}`,
            position: String.fromCharCode(65 + i) + (hasTitle ? 1 : 0)
          }
        );
      })
      .reduce(
        (prev, next) =>
          Object.assign({}, prev, {
            [next.position]: { v: next.v, s: styleCell }
          }),
        {}
      );
    const _body = body
      .map((v, i) =>
        header.map((k, j) => {
          let key = Object.keys(k);
          return Object.assign(
            {},
            {
              v: v[key[0]],
              position: String.fromCharCode(65 + j) + (i + (hasTitle ? 2 : 1))
            }
          );
        })
      )
      .reduce((prev, next) => prev.concat(next))
      .reduce(
        (prev, next) =>
          Object.assign({}, prev, {
            [next.position]: { v: next.v, s: styleCell }
          }),
        {}
      );

    const mergeThead = this.setMergeThead(_headers, hasTitle, title);

    const _merges = this.setTableMerges(header, _headers, hasTitle);

    const _thead = this.setTableThead(mergeThead);

    const output = Object.assign({}, _thead, _body);

    const outputPos = Object.keys(output).sort();

    const ref = outputPos[0] + ":" + outputPos[outputPos.length - 1];

    const wb = {
      SheetNames: ["mySheet"],
      Sheets: {
        mySheet: Object.assign({}, output, { "!ref": ref, "!merges": _merges })
      }
    };

    this.save(wb, `${title}.xlsx`);
  };

  this.setTableThead = wb => {
    for (let key in wb) {
      let i = wb[key].v.indexOf("");
      if (wb[key].v.includes("")) {
        wb[key].v = wb[key].v.substr(0, i);
      }
    }
    return wb;
  };

  // 設(shè)置合并表頭
  this.setTableMerges = (header, wb, hasTitle) => {
    let _merges = [];
    let len = header.length - 1;
    if (hasTitle) {
      let o = {
        s: {
          c: 0,
          r: 0
        },
        e: {
          c: len,
          r: 0
        }
      };
      _merges.push(o);
    }
    return [..._merges];
  };

  // 設(shè)置表頭
  this.setMergeThead = (wb, merge, hasTitle, title) => {
    const borderAll = {
      top: {
        style: "thin"
      },
      bottom: {
        style: "thin"
      },
      left: {
        style: "thin"
      },
      right: {
        style: "thin"
      }
    };
    if (hasTitle) {
      wb["A1"] = {
        v: `${title}`,
        s: {
          border: borderAll,
          font: {
            sz: 18,
            bold: true
          },
          alignment: {
            horizontal: "center"
          }
        }
      };
    }
    return wb;
  };

  this.setBorderStyle = () => {
    const borderAll = {
      top: {
        style: "thin"
      },
      bottom: {
        style: "thin"
      },
      left: {
        style: "thin"
      },
      right: {
        style: "thin"
      }
    };
    return { border: borderAll };
  };

  this.save = (wb, fileName) => {
    let wopts = {
      bookType: "xlsx",
      bookSST: false,
      type: "binary"
    };
    let xw = XLSX.write(wb, wopts);
    let obj = new Blob([this.s2ab(xw)], {
      type: ""
    });
    let elem = document.createElement("a");
    elem.download = fileName || "下載";
    elem.href = URL.createObjectURL(obj);
    elem.click();
    setTimeout(function() {
      URL.revokeObjectURL(obj);
    }, 100);
  };

  this.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;
    }
  };

  // 根據(jù)val查詢Object key
  this.findKey = (val, obj) => {
    return Object.keys(obj).find(v => obj[v] === val);
  };
}

利用DOM導(dǎo)出

js-xlsx提供了一個直接導(dǎo)出HTML上的DOM表格方法XLSX.utils.table_to_book，但是導(dǎo)出的excel文件時沒有任何樣式，利用xlsx-style中的xlsx.full.min.js來導(dǎo)出時，沒有上面這個方法，后面取了巧。

把xlsx-style中的full文件導(dǎo)出來的XLSX改成了STYLEXLSX；

引用如下：

利用js-xlsx來導(dǎo)出表格數(shù)據(jù)，用STYLEXLSX.write來寫入數(shù)據(jù)。

STYLEXLSX.write(
  wb,
  {
    bookType: type == undefined ? "xlsx" : type,
    bookSST: false,
    type: "binary"
  }
)

具體主要代碼：

/**
 * 
 * @param {Object} dom table的dom元素
 * @param {Object} name 導(dǎo)出的表名
 * @param {Object} type 導(dǎo)出的類型
 * 
 */
function exportExl(dom, name = "導(dǎo)出數(shù)據(jù)", type) {
    var wb = XLSX.utils.table_to_book(dom, {sheet: "Sheet JS"});
    var wopts = {
    bookType: "xlsx",
    bookSST: true,
    type: "binary",
    cellStyles: true
    };

    setExlStyle(wb["Sheets"]["Sheet JS"]);
    
    let tmpDown = new Blob(
        [
            this.s2ab(
                STYLEXLSX.write(
                    wb,
                    {
                        bookType: type == undefined ? "xlsx" : type,
                        bookSST: false,
                        type: "binary"
                    } //這里的數(shù)據(jù)是用來定義導(dǎo)出的格式類型
                )
            )
        ],
        {
            type: ""
        }
    );
    saveAs(
        tmpDown,
        `${name}` +
            "." +
            (wopts.bookType == "biff2" ? "xls" : wopts.bookType)
    );    
}

function saveAs(obj, fileName) {
    let tmpa = document.createElement("a");
    tmpa.download = fileName || "下載";
    tmpa.href = URL.createObjectURL(obj);
    tmpa.click();
    setTimeout(function() {
        URL.revokeObjectURL(obj);
    }, 100);
}    


function 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;
    }
};

function setExlStyle (data) {  
    
  let borderAll = {  //單元格外側(cè)框線
    top: {
      style: "thin"
    },
    bottom: {
      style: "thin"
    },
    left: {
      style: "thin"
    },
    right: {
      style: "thin"
    }
  }; 
    data["!cols"] = [];
    for (let key in data) {
        if (data[key] instanceof Object) {
            data[key].s = {
                border: borderAll,
                alignment: {
                    horizontal: "center"   //水平居中對其
                },
                numFmt: 0
            }
            data["!cols"].push({wpx: 170});
        }
    }
    return data;
}

缺陷

如果用數(shù)據(jù)來控制我們的導(dǎo)出，發(fā)現(xiàn)配置多級表頭時會好復(fù)雜，所以沒去深究了，用DOM來導(dǎo)出，又發(fā)現(xiàn)如果要導(dǎo)出分頁表格時只能導(dǎo)出當(dāng)前頁的數(shù)據(jù)。

而且現(xiàn)在所有的表格都可能不是規(guī)范的表格，每個表格結(jié)構(gòu)可能都不相同，只能多帶帶處理。

當(dāng)前所有代碼查看

云服務(wù)器 GPU云服務(wù)器 excel表格導(dǎo)出 excel導(dǎo)出出錯 excel導(dǎo)出亂碼 excel導(dǎo)入導(dǎo)出

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99098.html

發(fā)表評論

登陸后可評論

0條評論

muzhuyu

男|高級講師

我要關(guān)注我要私信

TA的文章

華為機試HJ77：火車進站

閱讀 2595·2021-09-23 11:21
主機記錄是什么-什么是主機記錄和指針記錄？

閱讀 1891·2021-09-22 15:15
Totyun：香港VPS/日本VPS全場5折優(yōu)惠;2核2G內(nèi)存,10Mbps不限流量,$6/月起

閱讀 982·2021-09-10 11:27
老板讓我十分鐘上手nx-admin

閱讀 3449·2019-08-30 15:54
css盒子模型

閱讀 661·2019-08-30 15:52
蘋果官網(wǎng)上展示的分辨率是物理像素嗎？

閱讀 1342·2019-08-30 15:44
小丸子成長記---在stylus下用DIV+CSS一步一步打造小丸子

閱讀 2356·2019-08-29 15:06
可想造一個屬于你自己的jQuery庫?(二)

閱讀 2981·2019-08-28 18:21

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

利用js-xlsx前端導(dǎo)出Excel

相關(guān)文章

**[SheetJS] js-xlsx模塊學(xué)習(xí)指南**

純前端實現(xiàn)excel表格導(dǎo)入導(dǎo)出

**前端實現(xiàn)Excel導(dǎo)入和導(dǎo)出功能**

發(fā)表評論

0條評論

muzhuyu

男|高級講師

TA的文章

華為機試HJ77：火車進站

主機記錄是什么-什么是主機記錄和指針記錄？

Totyun：香港VPS/日本VPS全場5折優(yōu)惠;2核2G內(nèi)存,10Mbps不限流量,$6/月起

老板讓我十分鐘上手nx-admin

css盒子模型

蘋果官網(wǎng)上展示的分辨率是物理像素嗎？

小丸子成長記---在stylus下用DIV+CSS一步一步打造小丸子

可想造一個屬于你自己的jQuery庫?(二)

最新活動