適用於iview的表格轉Excel插件

時間 2019-11-13

標籤適用於 iview 表格 excel 插件欄目 Microsoft Office 简体版

原文原文鏈接

在網上找的一個表格轉excel插件，通過修改後使其適用於iview中的table組件html

let idTmr;
const getExplorer = () => {
    let explorer = window.navigator.userAgent;
    //ie 
    if (explorer.indexOf("MSIE") >= 0) {
        return 'ie';
    }
    //firefox 
    else if (explorer.indexOf("Firefox") >= 0) {
        return 'Firefox';
    }
    //Chrome
    else if (explorer.indexOf("Chrome") >= 0) {
        return 'Chrome';
    }
    //Opera
    else if (explorer.indexOf("Opera") >= 0) {
        return 'Opera';
    }
    //Safari
    else if (explorer.indexOf("Safari") >= 0) {
        return 'Safari';
    }
}

const method = (ref,name) => { 

    //整個表格拷貝到EXCEL中
    if (getExplorer() == 'ie') {
        let curTbl = ref;
        let oXL = new ActiveXObject("Excel.Application");

        //建立AX對象excel 
        let oWB = oXL.Workbooks.Add();
        //獲取workbook對象 
        let xlsheet = oWB.Worksheets(1);
        //激活當前sheet 
        let sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        //把表格中的內容移到TextRange中 
        sel.select;
        //全選TextRange中內容 
        sel.execCommand("Copy");
        //複製TextRange中內容  
        xlsheet.Paste();
        //粘貼到活動的EXCEL中       
        oXL.Visible = true;
        //設置excel可見屬性

        try {
            let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
            print("Nested catch caught " + e);
        } finally {
            oWB.SaveAs(fname);

            oWB.Close(savechanges = false);
            //xls.visible = false;
            oXL.Quit();
            oXL = null;
            // 結束excel進程，退出完成
            window.setInterval("Cleanup();", 1);
            idTmr = window.setInterval("Cleanup();", 1);

        }

    } else {
        tableToExcel(ref,name)
    }
}

const Cleanup = () => {
    window.clearInterval(idTmr);
}

const tableToExcel = (function() {
    // 編碼要用utf-8否則默認gbk會出現中文亂碼
    let uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function(s) {
            return window.btoa(unescape(encodeURIComponent(s)));
        }, 
        format = (s, c) => {
            return s.replace(/{(\w+)}/g,
                (m, p) => {
                    return c[p];
                })
        }
    return (table, name) => {
        let ctx = {
            worksheet: name,
            table
        }

        //建立下載
        let link = document.createElement('a');
        link.setAttribute('href', uri + base64(format(template, ctx)));
        link.setAttribute('download', name); 

        // window.location.href = uri + base64(format(template, ctx))
        link.click();
    }
})()

export default (theadData, tbodyEle, dataname = 'Worksheet') => {
    // 寫入key過濾不顯示的td
    let thArr = [];
    // 創建節點
    let table = document.createElement('table');
    let thead = document.createElement('thead');
    let tbody = tbodyEle.$el.getElementsByClassName('ivu-table-tbody')[0].cloneNode(true);
    
    //  創建thead中的tr
    let thTr = document.createElement('tr');
    //  遍歷寫入th表頭
    for(let i of theadData){
        thArr.push(i.key);
        let th = document.createElement('th');
        let text = document.createTextNode(i.title);
        th.appendChild(text);
        thTr.appendChild(th);
    }
    
    thead.appendChild(thTr);
    table.appendChild(thead);
    table.appendChild(tbody)
    console.log(table)
    method(table.innerHTML, dataname);
}

示例ios

<template>
  <div>
    <Table :columns="columns" :data="data" size="small" ref="table"></Table>
    <br>
    <Button type="primary" size="large" @click="exportData()">
      <Icon type="ios-download-outline"></Icon> Export source data</Button>
  </div>
</template>
<script>
import excel from './tableToExcel.js'
export default {
  name: 'HelloWorld',
  data() {
    return {
      columns: [{
          title: '序號',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          width: 100,
          key: 'xingming'
        },
        {
          title: '我的帳號',
          key: 'grzh'
        },
        {
          title: '證件號碼',
          key: 'zjhm'
        },
        {
          title: '未經過緣由',
          key: 'cwxx'
        }
      ],
      data: [{
        xingming: '張三',
        grzh: '11231',
        zjhm: '123123123123123',
        cwxx: '未經過緣由',
      }, {
        xingming: '張三',
        grzh: '11231',
        zjhm: '123123123123123',
        cwxx: '未經過緣由',
      }]
    }
  },
  methods: {
    exportData() {
      excel(this.columns, this.$refs.table, '錯誤報告');
    }
  }
}

</script>