在网上找的一个表格转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,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);

}

示例

<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>

适用于iview的表格转Excel插件的更多相关文章

  1. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  2. 不需要高价购买BI工具，掌握这个Excel插件就能碾压大数据

    ​曾几何时,EXCEL在数据界可谓是独树一帜,引领风骚,在职场中无人不知,无人不晓.但是随着大数据的出现,EXCEL便风光不再,江河日下,一度被其他大数据工具挤到了后面,逐渐被边缘化了.而我是一个EX ...

  3. 【小o地图Excel插件版】计算两点间驾车路径，获取途径道路、驾车距离、耗时等信息

    小o地图Excel插件版:一款基于Excel软件开发的地图软件,提供基于Excel表格进行地理数据挖掘.地理数据分析.地图绘制.地图图表等功能的工具类软件.具有易用.高效.稳定的特点,能够满足地理数据 ...

  4. 【小o地图Excel插件版】不止能做图表，还能抓58、大众点评网页数据...

    小o地图Excel插件版:一款基于Excel软件开发的地图软件,提供基于Excel表格进行地理数据挖掘.地理数据分析.地图绘制.地图图表等功能的工具类软件.具有易用.高效.稳定的特点,能够满足地理数据 ...

  5. 导出Excel插件——Export-CSV ---20150610

    出处:http://bbs.hcharts.cn/thread-99-1-1.html   导出Excel插件——Export-CSV 一.插件信息 插件名:Export-CSV(导出Execl文件) ...

  6. 强力推荐！五款能让你成为Excel“高手”的Excel插件

    excel是大家日常生活中经常用到一款表格软件,虽然软件本身的功能已经非常齐全了,但是插件可以进一步加强软件的功能,为用户提供更好的体验,提高工作效率,需要的用户快来看看吧. 1.Smartbi 首推 ...

  7. 支持10种格式的 HTML 表格导出 jQuery 插件

    HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...

  8. 用VBA计算WPS 表格ET EXCEL中的行数和列数的多重方法

    用VBA计算WPS 表格ET EXCEL中的行数和列数 每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count Ac ...

  9. ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...

随机推荐

  1. PHP icov转码报错解决方法，iconv(): Detected an illegal character in input string

    iconv(): Detected an illegal character in input string 错误解决方法 //转码 function iconv_gbk_to_uft8($strin ...

  2. ajax提交时 富文本CKEDITOR 获取不到内容

    ckeditor数据向content(页面用以替换的编辑框)的同步 问题: 我们发现,在数据通过ajaxSubmit提交的过程中,并不能将最新的数据进行提交.换句话说,最新的数据无法被jQuery.f ...

  3. Could not obtain transaction-synchronized Session for current thread 错误的解决方法！

    BsTable bsTable = new BsTable(); // String time = request.getParameter("date"); String tim ...

  4. Spring BindingResult验证框架Validation特殊用法

    使用注解@Valid(实体属性校验) Springboot实现 Spring实现 一.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate ...

  5. python中矢量化字符串方法

  6. Grok Debugger本地安装（转载）

    原文链接:http://fengwan.blog.51cto.com/508652/1758845 最近在使用ELK对日志进行集中管理,因为涉及到日志的规则经常要用到http://grokdebug. ...

  7. leetcode笔记--6 Add Digits

    question: Given a non-negative integer num, repeatedly add all its digits until the result has only ...

  8. localStorage简析

    声明:引用自http://www.cnblogs.com/st-leslie/p/5617130.html 一.什么是localStorage.sessionStorage 在HTML5中,新加入了一 ...

  9. POJ 2229 递推

    Farmer John commanded his cows to search for different sets of numbers that sum to a given number. T ...

  10. truffle的调用nodeJs的问题

    Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) 升级到Truffle3.0 如果之前安装的是Truffle2.0版本,需要主动升级到Truffle3.0,两者的语法变化有点大 ...