利用js生成读取页面数据并导出为excel

//核心，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的更多相关文章

利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
js循环读取json数据，将读取到的数据用js写成表格
①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...
数据可视化之powerBI基础（十一）Power BI中的数据如何导出到Excel中？
https://zhuanlan.zhihu.com/p/64415543 把Excel中数据加载到PowerBI中我们都已经熟悉了,但是怎么把在PowerBI中处理好的数据导出到Excel中呢?毕竟 ...
把数据库里面的stu表中的数据，导出到excel中
# 2.写代码实现,把我的数据库里面的stu表中的数据,导出到excel中 #编号名字性别 # 需求分析:# 1.连接好数据库,写好SQL,查到数据 [[1,'name1','男'],[1,'na ...
利用layer实现MVC页面数据互交提示弹框
需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息前期准备: ...
json-server 和mock.js生成大量json数据
JSON-server和mock.jsmock文件夹下 db.json db.jsjson-sever使用安装:npm install json-server -g/mock 目录下执行json-s ...
利用存储过程生成大量的数据（oracle，mysql）
在进行查询操作的性能测试时,往往需要测试大数据量模式下的查询功能的性能,这是就需要我们去创造一些测试数据来填充数据库,来模拟真是环境,造数据的方式有很多种,可以使用loadrunner,jmeter等 ...
SpringBoot 利用freemaker生成静态页面
1.  <dependency> <groupId>org.springframework.boot</groupI ...
salesforce 零基础学习（二十三）数据记录导出至excel（自定义报表导出）
我们都知道,报表有个功能为导出excel,但是有的时候客户需求往往标准的报表达不到,比如导出excel,其中本月修改的数据字段标红,如下图所示. 这就需要我们去写VF来实现此功能. 需求:将数据表记录 ...

随机推荐

UVA10462：Is There A Second Way Left? （判断次小生成树）
Is There A Second Way Left? Description: Nasa, being the most talented programmer of his time, can’t ...
DOM用TagName操作标签
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
大道至简第一章伪代码读后感o(╯□╰)o
import.java.io*; import class duhougan; public static void main(Striing arges[]){ system.out.println ...
Elastic Search操作入门
前言 Elastic Search是基于Lucene这个非常成熟的索引方案,另加上一些分布式的实现:集群,sharding,replication等.具体可以参考我同事写的文章. 本文主要介绍ES入门 ...
generatorConfiguration配置文件及其详细解读
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...
单词转换成向量形式 word2vec
word2vec(word to vector)是一个将单词转换成向量形式的工具.可以把对文本内容的处理简化为向量空间中的向量运算,计算出向量空间上的相似度,来表示文本语义上的相似度.word2ve ...
Google 字体API的基本使用
一.链接CSS文件直接使用: 基本上你链接直接在Google.com上的CSS文件.通过网址参数,你可以选择你想要的字体,以及这些字体的变化. <link rel="styleshee ...
深入理解 JavaScript（五）
根本没有“JSON 对象”这回事! 前言写这篇文章的目的是经常看到开发人员说:把字符串转化为 JSON 对象,把 JSON 对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下 ...
网络应用框架Netty快速入门
一初遇Netty Netty是什么? Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.可扩展协议的服务器和客户端 ...
python实战===用python识别图片中的中文
需要安装的模块 PIL pytesseract 需要下载的工具: http://download.csdn.net/download/bo_mask/10196285 因为之前百度云的链接总失效,所以 ...

利用js生成读取页面数据并导出为excel

利用js生成读取页面数据并导出为excel的更多相关文章

随机推荐

热门专题