来自：http://www.imooc.com/article/13374

　　

//html代码<!DOCTYPE HTML>
<html>

<head>
    <title>Adminstratior Platform</title>
    <meta content="text/html;charset=utf-8" http-equiv="content-type">
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/app1.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script src="../js/mui.min.js" type="text/javascript"></script>

</head>

<body>
<header id="adminstrator" class="mui-bar mui-bar-nav">
    <div id="login" class="mui-btn mui-btn-primary">登陆</div>
    <h1 class="mui-title">辅昊系统---电力监测</h1>

</header>
<div class="mui-content">
    <div id="navs" class="col-sm-4">
        <ul class="mui-table-view mui-grid-view mui-grid-9 ">
            <li v-for="item in navs" id="{{item.id}}"
                class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="javascript:;">
                    <span class="iconfont icon-{{item.imageUri.replace(/./,'')}}"></span>
                    <div class="mui-media-body" v-text='item.name'></div>
                </a>
            </li>
        </ul>
    </div>
    <div id="lists" class="col-sm-8">
        <div class="form-group">
            <label>Search</label>
            <input type="text" class="search-input" v-model="searchKey"/>
        </div>
        <simple-grid :persons="persons" :columns="columns" :search-key="searchKey">
        </simple-grid>
        <div id="JsonToExcel" class="mui-btn mui-btn-primary mui-pull-right" >JsonToExcel</div>
    </div>
    <template id="grid-template">
        <table>
            <thead>
            <tr>
                <th v-for="i in columns">
                    {{ i.name}}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in persons  filterBy searchKey">
                <td v-for="j in columns">
                    {{i[j.name]}}
                </td>
            </tr>
            </tbody>
        </table>
    </template>
</div>
</body>

<script>
    $('#login').bind('click', function () {
        alert('success');
    });
    $('#navs').delegate('li', 'click', function (e) {
        e.stopPropagation();
        $(this).find('span').toggleClass("chosen");
        vm.persons.push({
            "姓名": "Tracy",
            "年龄": "22",
            "性别": "Female"
        });
    });
</script>
<script src="../js/vue.js" type="text/javascript"></script>
<script src="../js/vue-resource.min.js" type="text/javascript"></script>
<script src="../js/demo-PC.js" type="text/javascript"></script>
</html>

//js代码
var navs = new Vue({
    el: '#navs',
    data: {
        navs: []
    },
    ready: function () {
        this.$http.get('demoPC.json').then(function (response) {
            this.navs = response.data;
        });
    }
});
Vue.component('simple-grid', {
    template: '#grid-template',
    props: ['persons', 'columns', 'searchKey']
});
var vm = new Vue({
    el: '#lists',
    data: {
        searchKey: '',
        columns: [{
            name: '姓名'
        }, {
            name: '年龄'
        }, {
            name: '性别'
        }],
        persons: []
    },
    ready: function () {
        this.$http.get('table.json').then(function (response) {
            this.persons = response.data.aa;
        });
    }
})
// 页面json数据生成excel表
$(function () {
    $('#JsonToExcel').click(function () {
        var data = {
            "title": [],
            "data": []
        };
        var th = document.querySelectorAll('#lists table>thead>tr>th');
        for (var i = 0; i < th.length; i++) {
            data.title.push(th[i].innerHTML);
        };
        var tdrs = document.querySelectorAll('#lists table>tbody>tr');
        for (var i = 0; i < tdrs.length; i++) {
            var ele = [];
            for (var j = 2; j <=4; j++) {
                ele.push(tdrs[i].childNodes[j].innerHTML);
            }
            data.data.push(ele);
        }
        if (data == '') {
            return;
        }
        JSONToExcelConvertor(data.data, "辅昊--电力", data.title);
    });
});
function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
    //先转化json
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var excel = '<table>';
    //生成表头
    var row = "<tr>";
    for (var i = 0; i < ShowLabel.length; i++) {
        row += "<td>" + ShowLabel[i] + '</td>';
    }
    excel += row + "</tr>";
    //循环生成表身
    for (var i = 0; i < arrData.length; i++) {
        var row = "<tr>";
        for (var j in arrData[i]) {
//                    var name = arrData[i][index].name === "." ? "" : arrData[i][index].name;
            var td = arrData[i][j];
            row += '<td>' + td + '</td>';
        }
        excel += row + "</tr>";
    }
    excel += "</table>";
    console.log(excel);
    var excelFile = "<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'>";
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "sheet";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";
    var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    var link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = FileName + ".xls";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

js实现导出数据到excel的更多相关文章

  1. java代码导出数据到Excel、js导出数据到Excel(三)

     jsp内容忽略,仅写个出发按钮:          <button style="width: 100px" onclick="expertExcel()&quo ...

  2. [js]EasyUI导出数据表格(Export DataGrid)

    包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...

  3. Java操作Jxl实现导出数据生成Excel表格数据文件

    实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...

  4. 1.ASP.NET MVC使用EPPlus，导出数据到Excel中

    好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...

  5. 导出数据到Excel --使用ExcelReport有感

    先看图,这是几个月前用NPOI写的导出数据到Excel,用了上百行代码,而且难控制,导出来也比较难看 excel打开的效果 下面是我用ExcelReport类库导出到Excel的操作 1.首先引用Ex ...

  6. 使用Open xml 操作Excel系列之二--从data table导出数据到Excel

    由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...

  7. Dynamics CRM导出数据到Excel

    原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...

  8. MVC导出数据到EXCEL新方法：将视图或分部视图转换为HTML后再直接返回FileResult

    导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...

  9. php导出数据到excel,防止身份证等数字字符格式变成科学计数的方法

    而关于php的也有,但是大多都是用phpExcel导出的方法或者spreadsheet等类或者控件之类的导出方法,而我所在维护的系统却用很简单的方法,如下,网上很少有讲如何设置要导出数据的EXcel格 ...

随机推荐

  1. 按shift键调出命令行的脚本

    打开Notepad++,粘贴以下命令,并将文件命名为opencmdhere.reg(注意:文件编码格式为UCS-2 Little Endian,否则会导致中文乱码),再双击打开即可 Windows R ...

  2. 【BZOJ 1260】[CQOI2007]涂色paint

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 区间DP 设f[i][j]表示i..j这个区间变成目标需要的最少染色次数. f[i][i] = 1 然后考虑f[i][j]的产生方法 ...

  3. Fedora 17 安裝完全指南

    Fedora 17 关闭U盘自动mount gsettings set org.gnome.desktop.media-handling automount "false" gse ...

  4. GBK编码具体解析（附GBK码位分布图）

    1.GBK码位分布图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...

  5. orale 中创建定时任务

    --添加变量 variable job1 number; --创建JOB begin   dbms_job.submit(:job1,'testjob;',sysdate, 'TRUNC(sysdat ...

  6. Android平台Camera实时滤镜实现方法探讨(九)--磨皮算法探讨(一)

    上一篇开头提到了一些可用于磨皮的去噪算法.以下我们实现这些算法而且观察效果,咱不考虑实时性的问题 本文首先探讨的首先是<基于局部均方差相关信息的图像去噪及其在实时磨皮美容算法中的应用> 该 ...

  7. 6、Java类、对象、构造器、引用类型内存基本知识、引用类型值传递

    1.面向对象三大特征: 封装:encapsulation 继承:inheritance 多态:polymorphism 2.类中 数据特征(property):属性(attribute)静态的stat ...

  8. HDU 3016 Man Down(线段树)

    HDU 3016 Man Down 题目链接 题意:是男人就下100层的游戏的简单版,每次仅仅能从两端下落.求落地最大血量 思路:利用线段树能够处理出每一个线段能来自哪几个线段.然后就是dag最长路了 ...

  9. codevs1052

    题目地址:http://codevs.cn/problem/1053/ 分析: 模拟 代码: var s:string; a:array['a'..'z'] of longint; i,j,t,n:l ...

  10. How to Download Windows 10 Spotlight/Lock Screen Images

    http://www.online-tech-tips.com/windows-10/download-windows-10-spotlight-lock-screen-images/ 图片位置 C: ...