利用js-xlsx前端導出Excel

muzhuyu 發布于2019-08-23 12:55 / 1206人閱讀

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

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

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

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

利用數據導出

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

npm install xlsx-style

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

這里借鑒這位博主主要代碼，整理了下，可以實現表頭與導出文件名稱。

具體調用可以查看DEMO

/**
 * @param {Array} header 表格頭部
 * @param {Array} body 表格數據
 * @param {String} title 表格導出名稱
 * @param {Boolean} hasTitle 是否需要表格標題
 */
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;
  };

  // 設置合并表頭
  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];
  };

  // 設置表頭
  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;
    }
  };

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

利用DOM導出

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

把xlsx-style中的full文件導出來的XLSX改成了STYLEXLSX；

引用如下：

利用js-xlsx來導出表格數據，用STYLEXLSX.write來寫入數據。

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

具體主要代碼：

/**
 * 
 * @param {Object} dom table的dom元素
 * @param {Object} name 導出的表名
 * @param {Object} type 導出的類型
 * 
 */
function exportExl(dom, name = "導出數據", 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"
                    } //這里的數據是用來定義導出的格式類型
                )
            )
        ],
        {
            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 = {  //單元格外側框線
    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;
}

缺陷

如果用數據來控制我們的導出，發現配置多級表頭時會好復雜，所以沒去深究了，用DOM來導出，又發現如果要導出分頁表格時只能導出當前頁的數據。

而且現在所有的表格都可能不是規范的表格，每個表格結構可能都不相同，只能多帶帶處理。

當前所有代碼查看

云服務器 GPU云服務器 excel表格導出 excel導出出錯 excel導出亂碼 excel導入導出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99098.html

[SheetJS] js-xlsx模塊學習指南

摘要：簡介是前端操作以及類似的二維表的最佳選擇之一而是它的社區版本將注意力集中到了數據轉換和導出上所以它支持相當多種類的數據解析和導出不僅僅局限于支持格式支持的導入格式支持的導出格式它可以解析符合格式的數據導出符合格式的數據利用中間層操作數據簡介 SheetJS是前端操作Excel以及類似的二維表的最佳選擇之一,而js-xlsx是它的社區版本. js-xlsx將注意力集中到了數據轉換和導出...

zhaot 2019-08-23 15:05 評論0 收藏0
純前端實現excel表格導入導出

摘要：使用時，前端可以將后端返回的數據拼接成自己需要導出的格式，下載到電腦中，完全不依賴后端。前言 github: https://github.com/stardew516... 以往做excel表格下載功能的時候，都是后端生成好表格后，存儲在某個地方，然后給前端一個鏈接，前端使用a標簽加download下載，或者使用node。其實純前端也是可以做表格下載的，有一個很好用的javascr...

CoyPan 2019-08-21 16:19 評論0 收藏0
前端實現Excel導入和導出功能

摘要：介紹最近項目中讓實現一個導入導出的功能，查找了一些插件后發現這個插件，所以就嘗試使用了一下，這里將使用方法和遇到的問題簡單記錄一下。介紹最近項目中讓實現一個導入導出Excel的功能，查找了一些插件后發現js-xlsx這個插件，所以就嘗試使用了一下，這里將使用方法和遇到的問題簡單記錄一下。 SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件，瀏覽器支持良好，并且能在多個...

Amio 2019-08-23 14:55 評論0 收藏0