vue XLSX 組件使用

// npm install xlsx 安裝 xlsx
import XLSX from "xlsx"

function workbook2blob(workbook) {
  // 生成excel的配置項
  var wopts = {
    // 要生成的文件類型
    bookType: "xlsx",
    //是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
    bookSST: false,
    type: "binary",
  }
  var wbout = XLSX.write(workbook, wopts)

  // 將字符串轉ArrayBuffer
  function s2ab(s) {
    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
  }

  let buf = s2ab(wbout)
  var blob = new Blob([buf], {
    type: "application/octet-stream",
  })
  return blob
}

// 將blob對象 創建bloburl,然后用a標簽實現彈出下載框
function openDownloadDialog(blob, fileName) {
  if(typeof blob === "object" && blob instanceof Blob) {
    blob = URL.createObjectURL(blob) // 創建blob地址
  }
  var aLink = document.createElement("a")
  aLink.href = blob
  // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，有時候 file:///模式下不會生效
  aLink.download = fileName || ""
  var event
  if(window.MouseEvent) event = new MouseEvent("click")
  //   移動端
  else {
    event = document.createEvent("MouseEvents")
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  }
  aLink.dispatchEvent(event)
}
]


/*  導出為Excel  */
// Excel表格樣式
// sheetData = [
//   {
//     name: "",//表名
//     // Excel表格內容
//     dataList: [
//       {
//         name: "value",// name單元格名字:value數據內容
//       },
//     ],
//   },
// ]
// name 保存的文件名字
export function exportExcel(sheetData, name) {

// 創建一個新的空的workbook
  var wb = XLSX.utils.book_new()
  sheetData.forEach(item => {
    XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(item.list), item.name)
  })
  const workbookBlob = workbook2blob(wb)
  openDownloadDialog(workbookBlob, name + ".xlsx")
}
// 使用方法: exportExcel(sheetData, "name") sheetData對應導出為Excel的數據,name為Excel導出是的文件名

/*  Excel表格導入為JSON  */
export function readExcel(file) { // 表格導入
  const fileReader = new FileReader()
  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result
      const workbook = XLSX.read(data, { type: "binary" })
      let params = []
      // 取對應表生成json表格內容
      workbook.SheetNames.forEach(item => {
        params.push({
          name: item,
          dataList: XLSX.utils.sheet_to_json(workbook.Sheets[item]),
        })
      })
      return params
      // 重寫數據
    } catch (e) {
      return false
    }
  }
  fileReader.readAsBinaryString(file)
}
// 導入使用說明 readExcel(file) file對象類型的Excel文件