适用于iview的表格转Excel插件

Posted 吕岳阳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了适用于iview的表格转Excel插件相关的知识,希望对你有一定的参考价值。

在网上找的一个表格转excel插件,经过修改后使其适用于iview中的table组件

 

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) => {

  //整个表格拷贝到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)
  }
};

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

const tableToExcel = (function () {
  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><!--[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 || ‘Worksheet‘,
      table
    };
    window.location.href = uri + base64(format(template, ctx))
  }
})();

export default (theadData, tbodyData, name = ‘Worksheet‘) => {
  // 写入key过滤不显示的td
  let thArr = [];
  // 建立节点
  let table = document.createElement(‘table‘);
  let thead = document.createElement(‘thead‘);
  let tbody = document.createElement(‘tbody‘);
  //  建立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);
  //  遍历写入td
  for (let i of tbodyData) {
    let tr = document.createElement(‘tr‘);
    for (let j in i) {
      //  筛选写入
      for (let k of thArr) {
        if (k == j) {
          let td = document.createElement(‘td‘);
          let text = document.createTextNode(i[j]);
          td.appendChild(text);
          tr.appendChild(td);
        }
      }
    }
    tbody.appendChild(tr);
  }
  table.appendChild(thead);
  table.appendChild(tbody);
  method(table.innerHTML, name);
}

 

以上是关于适用于iview的表格转Excel插件的主要内容,如果未能解决你的问题,请参考以下文章

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位

iview表格中图片显示及预览

[转]iview的render函数用法

表格怎么转换成excel表

iView中表格(Table)添加点击行,展开扩展,默认展开所有行

iView中表格(Table)自定义表头添加模糊搜索框