在网上找的一个表格转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. dz论坛Discuz_X3.4最新网站漏洞

    近期我们sinesafe安全部门审计discuz最新版的时候发现配置文件写入导致代码执行的问题.cms安装的时候一般会分为几个步骤去进行,其中有对配置文件config进行写入的步骤,当写入的时候未严格 ...

  2. tail命令使用

    1.tail命令 命令的主要用途是将指定的文件的最后部分输出到终端,如果该文件有更新,tail会自己主动刷新. 2.tail语法 tail [ -f ] [ -c Number | -n Number ...

  3. mongodb的学习之旅一

    描述 作为一枚菜鸟级别的coder,刚接触nodejs没有多久.现在在学习微信公众号的开发,但是碰到了mongodb保存用户数据的时候,出现了DeprecationWarning: Mongoose: ...

  4. Windows Server 2012下手动配置IIS的文件夹访问权限

    当新建一个website的时候,一般情况下IIS对相应的物理文件夹的访问权限是不够的. 针对匿名认证(anonymous authentication)需要: 打开文件夹properties-> ...

  5. ABAP CDS ON HANA-(1)CDSビュー作成

    Basic CDS View Creation Open HANA Studio. Goto ABAP perspective. Open the project, Navigate to the p ...

  6. Java 中编码与摘要算法

    URL 编码与解码 String s = "你好,世界!"; // URL 编码 String urlEncodedString = URLEncoder.encode(s, &q ...

  7. 一种简单实用的双向电平转换电路3.3V-5V

    当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...

  8. 一步一步学Linq to sql（三）：增删改

    示例数据库 字段名 字段类型 允许空 字段说明 ID uniqueidentifier 表主键字段 UserName varchar(50) 留言用户名 PostTime datetime 留言时间 ...

  9. 关于springboot 打包问题 jar包和 war包

    起因:项目开发完成   需要打包部署了  发现自己不会打包 那么开始网上学习打包? 那么怎么来打包那? 我们以前没有采用springboot 时候我们都是直接将项目打成war包形式  然后放到tomc ...

  10. Django入门与实战

    第1章 介绍课程目标及学习内容 1-1 课程介绍: 第2章 课前准备 2-1 课前准备: 第3章 开发环境搭建 3-1 开发环境搭建: 第4章 创建项目及应用 4-1 创建项目,并了解项目目录下的部分 ...