//核心，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. ACE的安装

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/03/580714.html ACE的安装是一件比较麻烦的事情,这里简单的记录了我在VS2005 ...

  2. [zz]【整理】Python中Cookie的处理：自动处理Cookie，保存为Cookie文件，从文件载入Cookie

    http://www.crifan.com/python_auto_handle_cookie_and_save_to_from_cookie_file/ #!/usr/bin/python # -* ...

  3. Leetcode 381. O(1) 时间插入、删除和获取随机元素 - 允许重复

    1.题目描述 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构. 注意: 允许出现重复元素. insert(val):向集合中插入元素 val. remove(val):当 va ...

  4. HDU2833 最短路 floyd

    WuKong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  5. Mybatis中传入List条件

    传入一个map的参数,map里有一个tenantIds的List,在xml里先判断这个List的size是否大于o,然后通过foreach 构造一个in后面括号里的元素,具体的xml如下: <i ...

  6. SPOJ 104 HIGH - Highways

    HIGH - Highways http://www.spoj.com/problems/HIGH/ In some countries building highways takes a lot o ...

  7. HDU 2639 Bone Collector II （dp）

    题目链接 Problem Description The title of this problem is familiar,isn't it?yeah,if you had took part in ...

  8. kndo grid：通过checkbox 实现多选和全选

    在kendo grid 里要想通过checkbox 实现多选和权限,我们就要通过templeate 和input 标签对kendo grid 进行自定义 1. 在column 里面加入一列checkb ...

  9. mysql增删

    create table msg (id int, name varchar(10)); 插入语句 insert into msg values(1,'root'); insert into msg( ...

  10. 【Python项目】使用Face++的人脸识别detect API进行本地图片情绪识别并存入excel

    准备工作 首先,需要在Face++的主页注册一个账号,在控制台去获取API Key和API Secret. 然后在本地文件夹准备好要进行情绪识别的图片/相片. 代码 介绍下所使用的第三方库 ——url ...