在网上找的一个表格转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. django的HttpResponse对象

    服务器接收到http协议的请求后,会根据报文创建HttpRequest对象,这个对象不需要我们创建,直接使用服务器构造好的对象就可以.视图的第一个参数必须是HttpRequest对象,在django. ...

  2. ctf题目writeup（4）

    2019.1.31 题目:这次都是web的了...(自己只略接触隐写杂项web这些简单的东西...) 题目地址:https://www.ichunqiu.com/battalion 1. 打开链接: ...

  3. 004---Python基本数据类型--元祖

    元祖 .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px ...

  4. red hat 7 启动过程（EFI）

    不同版本的Linux系统的启动过程在某些地方是不一样的,现在先来介绍一下red hat 7 的启动过程(EFI). (加电→图形登录界面) 接通电源 按下电源键 EFI固件启动 初始化硬件 从EFI启 ...

  5. （数据科学学习手札17）线性判别分析的原理简介&Python与R实现

    之前数篇博客我们比较了几种具有代表性的聚类算法,但现实工作中,最多的问题是分类与定性预测,即通过基于已标注类型的数据的各显著特征值,通过大量样本训练出的模型,来对新出现的样本进行分类,这也是机器学习中 ...

  6. 【Java】关于Spring框架的总结 （一）

    本文总结一些关于Spring框架的理解,注意点及基础操作.如果有不对的地方,欢迎批评和建议.大家一起努力吧! Spring 框架简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创 ...

  7. 使用sqoop将mysql中表导入hive中报错

    [hdfs@node1 root]$ sqoop import --connect jdbc:mysql://node2:3306/cm?charset-utf8 --username root -- ...

  8. Hibernate-ORM:15.Hibernate中的Criteria查询

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲师Hibernate中的Criteria查询! 一,Criteria简介: 刚接触Hibernate ...

  9. Jenkins的pipeline脚本中获取git代码变更用户名和email

    // Get checkout output valuedef changeLogSets = checkout([$class: 'GitSCM', branches: [[name: '*/mas ...

  10. mongodb数据库高级操作

    1.创建索引 2.索引名称 3.其他索引 4.explain 5.操作索引 6.高级特性 7.固定集合 8.导入导出 9.上锁 10.添加用户 11.主从复制