導出excel,自定義樣式

exportExcel($refs.tabs.$el, '導出名稱', 2)
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style';
import { saveAs } from 'file-saver';

// 無樣式
// export function exportExcel(name, el){//導出excel
//   el.querySelector('th').style='text-align:center; background:#0e396b;color:#07c0eb;'
//   el.querySelector('th').setAttribute('align', 'center');
//   let wb = XLSX.utils.table_to_book(el);//document.querySelector('table')

//   // 表Sheet1
//   wb.Sheets.Sheet1["!cols"] = [];
//   // 動態添加前24列  寬爲140px
//   for (let a = 0; a < 24; a++) {
//     wb.Sheets.Sheet1["!cols"].push({
//       wpx: 140,
//     })
//   }
//   let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
//   try {
//       saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name+'.xlsx')
//   } catch (e) { 
//       if (typeof console !== 'undefined') 
//       console.log(e, wbout) 
//   }
//   return wbout
// } 

/**
 *
 * @param el // 當前table
 * @param fileName 導出的文件名
 * @param titleNum  標題行數(是否合併行)
 * @param sheetName // 工作簿;
*/
export function exportExcel(el, name, titleNum){//導出excel
  exportTable(el, name, titleNum)
  function exportTable(el, fileName, titleNum=1, sheetName='Sheet1'){
    let wb = XLSX.utils.table_to_book(el, { sheet: sheetName, raw: true });
    let range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);
    //單元格邊框樣式
    let borderStyle = {
      top: {
        style: "thin",
        color: { rgb: "0e3b6e" }
      },
      bottom: {
        style: "thin",
        color: { rgb: "0e3b6e" }
      },
      left: {
        style: "thin",
        color: { rgb: "0e3b6e" }
      },
      right: {
        style: "thin",
        color: { rgb: "000000" }
      }
    };
    let cWidth = [];
    for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
      let len = 100; //默認列寬
      let len_max = 400; //最大列寬
      for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
        let cell = { c: C, r: R };                    //二維 列行確定一個單元格
        let cell_ref = XLSX.utils.encode_cell(cell);  //單元格 A1、A2
        if(wb.Sheets[sheetName][cell_ref]){
          // if (R == 0){
          if (R < titleNum){
            wb.Sheets[sheetName][cell_ref].s = {  //設置(標題)單元格的樣式 style
              font:{
                sz:12,
                color:{rgb:'0e3b6e'},
                bold:false
              },
              alignment:{
                horizontal:'center',
                vertical:'center',
              },
              fill:{
                fgColor:{rgb:'66b1ff'},
              },
              border: borderStyle,//用上面定義好的邊框樣式
            };
          }else { // 內容
            wb.Sheets[sheetName][cell_ref].s = {
              font:{
                sz:12,
                color:{rgb:'0e3b6e'},
                bold:false
              },
              alignment:{
                horizontal:'left',
                vertical:'center',
              },
              border: borderStyle,//用上面定義好的邊框樣式
            };
          }
          if(C==0 && R >= titleNum){ // 第一列
            wb.Sheets[sheetName][cell_ref].s = {
              font:{
                sz:12,
                color:{rgb:'dc362e'},
                bold:true
              },
              alignment:{
                horizontal:'left',
                vertical:'center',
              },
            }
          }
          //動態自適應:計算列寬
          let va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v));
          var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文
          var card11 = "";
          if (card1){
            card11 = card1.join("")
          }
          var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g,"");  //剔除中文
          let st = 0;
          if (card11){
            // st += card11.length * 16  //中文字節碼長度
            st += card11.length * 20  //中文字節碼長度
          }
          if (card2){
            // st += card2.length * 8  //非中文字節碼長度
            st += card2.length * 10  //非中文字節碼長度
          }
          if (st > len){
            len = st;
          }
        }
      }
      if (len > len_max){//最大寬度
        len = len_max;
      }
      cWidth.push({'wpx':len});     //列寬
    }
    wb.Sheets[sheetName]['!cols'] = cWidth;
    var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
    var wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX,XLSX是沒有格式的!
    saveAs(new Blob([s2ab(wbout)], { type: "" }), fileName + '.xlsx'); 
  }
  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;
  }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章