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

最新推荐文章于 2023-03-15 16:54:20 发布

weixin_30315905

最新推荐文章于 2023-03-15 16:54:20 发布

阅读量245

点赞数

文章标签：数据库 javascript json ViewUI

原文链接：http://www.cnblogs.com/frank26/p/yl-20160930.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);}



//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>

转载于:https://www.cnblogs.com/frank26/p/yl-20160930.html

weixin_30315905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js生成读取页面数据并导出为excel

//核心，js部分 */var navs = new Vue({ el: '#navs', data: { navs: [] }, ready: function () { this.$http.get('demoPC.json').then(function (response) { this.navs = respo...
复制链接

扫一扫