//核心，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. iOS常用RGB颜色的色值

    常用RGB颜色表  色值 R G B 值 R G B 值 R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 ...

  2. HDU1083 ：Courses（二分图匹配）

    Cources Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  3. SQL Server 代理（已禁用代理 XP）

    sp_configure 'show advanced options', 1; GO RECONFIGURE WITH OVERRIDE; GO sp_configure 'Agent XPs', ...

  4. 无线局域网中RADIUS协议原理与实现

    转载自:http://blog.csdn.net/jinhill/article/details/5901042 摘要  RADIUS协议是一个被广泛应用于网络认证.授权和计费的协议.本文在介绍了RA ...

  5. bzoj 1696: [Usaco2007 Feb]Building A New Barn新牛舍 ——中位数排序

    Description 经过多年的积蓄,农夫JOHN决定造一个新的牛舍.他知道所有N(2 <= N <= 10,000)头牛的吃草位置,所以他想把牛舍造在最方便的地方. 每一头牛吃草的位置 ...

  6. 【POJ】2947 Widget Factory（高斯消元）

    http://poj.org/problem?id=2947 各种逗啊..还好1a了.. 题意我就不说了,百度一大把. 转换为mod的方程组,即 (x[1,1]*a[1])+(x[1,2]*a[2]) ...

  7. java map 转 json 自编封装

    1.自编封装代码: import com.alibaba.fastjson.JSON; import java.util.*; public class jsonConversion { privat ...

  8. AGC025简要题解

    AGC025简要题解 B RGB Coloring 一道简单题,枚举即可. C Interval Game 考虑可以进行的操作只有两种,即左拉和右拉,连续进行两次相同的操作是没有用的. 左拉时肯定会选 ...

  9. Windows10下配置Linux下C语言开发环境

    今天为大家介绍如在Windows10下配置Linux下C语言开发环境,首先安装linux子系统:启用开发者模式 1.打开设置 2.点击更新和安全3.点击开发者选项 4.启用开发人员模式 5.更改系统功 ...

  10. TCP之connect

    1. connect函数: #include <sys/socket.h> int connect(int sockfd, const struct sockaddr *servaddr, ...