//核心，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);}

//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生成读取页面数据并导出为excel的更多相关文章

  1. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  2. js循环读取json数据，将读取到的数据用js写成表格

    ①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...

  3. 数据可视化之powerBI基础（十一）Power BI中的数据如何导出到Excel中？

    https://zhuanlan.zhihu.com/p/64415543 把Excel中数据加载到PowerBI中我们都已经熟悉了,但是怎么把在PowerBI中处理好的数据导出到Excel中呢?毕竟 ...

  4. 把数据库里面的stu表中的数据，导出到excel中

    # 2.写代码实现,把我的数据库里面的stu表中的数据,导出到excel中 #编号 名字 性别 # 需求分析:# 1.连接好数据库,写好SQL,查到数据 [[1,'name1','男'],[1,'na ...

  5. 利用layer实现MVC页面数据互交提示弹框

    需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...

  6. json-server 和mock.js生成大量json数据

    JSON-server和mock.jsmock文件夹下 db.json db.jsjson-sever使用 安装:npm install json-server -g/mock 目录下执行json-s ...

  7. 利用存储过程生成大量的数据（oracle，mysql）

    在进行查询操作的性能测试时,往往需要测试大数据量模式下的查询功能的性能,这是就需要我们去创造一些测试数据来填充数据库,来模拟真是环境,造数据的方式有很多种,可以使用loadrunner,jmeter等 ...

  8. SpringBoot 利用freemaker生成静态页面

    1. <!-- freemarker模板 --> <dependency> <groupId>org.springframework.boot</groupI ...

  9. salesforce 零基础学习（二十三）数据记录导出至excel（自定义报表导出）

    我们都知道,报表有个功能为导出excel,但是有的时候客户需求往往标准的报表达不到,比如导出excel,其中本月修改的数据字段标红,如下图所示. 这就需要我们去写VF来实现此功能. 需求:将数据表记录 ...

随机推荐

  1. MyBatis框架的使用及源码分析(六) MapperRegistry

    我们先Mapper接口的调用方式,见<MyBatis框架中Mapper映射配置的使用及原理解析(一) 配置与使用>的示例: public void findUserById() { Sql ...

  2. 【SPOJ】1182 Sorted bit sequence

    [算法]数位DP [题解]动态规划 写了预处理函数却忘了调用是一种怎样的体验? #include<cstdio> #include<cstring> #include<a ...

  3. 第八周 yukun 20155335

  4. HDU - 5327 Olympiad（一维前缀和）

    Olympiad Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem ...

  5. 伪病毒 Rp_test

    第一个写的对电脑有破坏性的程序= =,然后发现写system的copy的时候不会用字符串替代路径,然后就萎了= =,只能写一个没有自身复制的伪病毒了,坑到了好多同学的电脑,23333.... //By ...

  6. JS中的实例方法与静态方法

    一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么 静态方法: function A(){} A.sayMeS=function(){ console.lo ...

  7. 详解JS中Number()、parseInt()和parseFloat()的区别

    三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt().parseFloat(): 专门用于把字符串转换成数值: 一.Number( ): (1)如果是Boolean ...

  8. 关于Solaris系统“mpt_sas”驱动

    1.mpt_sas 驱动源文件所在系统源代码中目录: illumos-soulos/usr/src/uts/common/sys/scsi/adapters/mpt_sas  -- 头文件 illum ...

  9. js中的indexOf

    1.概述 indexOf大小写敏感,其中的O要大写 2.对于字符串而言 indexOf返回字符串第一次出现的位置,若没有出现返回-1 var str = "hello world" ...

  10. kaggle比赛流程（转）

    一.比赛概述 不同比赛有不同的任务,分类.回归.推荐.排序等.比赛开始后训练集和测试集就会开放下载. 比赛通常持续 2 ~ 3 个月,每个队伍每天可以提交的次数有限,通常为 5 次. 比赛结束前一周是 ...