From 9f9eb79638d7ffe081b089a246c8ca6321086e84 Mon Sep 17 00:00:00 2001
From: falcon <9504402@qq.com>
Date: Tue, 2 Jun 2020 10:36:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=89=93=E5=8D=B0=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ReportService/wwwroot/js/site.js        | 32 ++++++++++++++++++++-
 ReportService/wwwroot/report/报表1.html | 37 +++++++++++++++++--------
 2 files changed, 56 insertions(+), 13 deletions(-)
diff --git a/ReportService/wwwroot/js/site.js b/ReportService/wwwroot/js/site.js
index 445941c..a732032 100644
--- a/ReportService/wwwroot/js/site.js
+++ b/ReportService/wwwroot/js/site.js
@@ -83,5 +83,35 @@ var myjs = {
         this.post(this.urls.GetServerTime, { format: format }, function (r) {
             callback(r.str);
         });
-    }
+    },
+    toExcel: {
+        uri: 'data:application/vnd.ms-excel;base64,',
+        template: '<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"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+            + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+            + '</x:ExcelWorkbook></xml><![endif]-->' +
+            ' <style type="text/css">' +
+            'table td {' +
+            'border: 1px solid #000000;' +
+            'width: 200px;' +
+            'height: 30px;' +
+            ' text-align: center;' +
+            ' }' +
+            '</style>' +
+            '</head><body ><table class="excelTable">{table}</table></body></html>',
+        base64(s) {
+            return window.btoa(unescape(encodeURIComponent(s)));
+        },
+        format(s, c) {
+            return s.replace(/{(\w+)}/g,
+                function (m, p) {
+                    return c[p];
+                });
+        },
+        tableToExcel(tableid, sheetName) {
+            if (!tableid.nodeType) tableid = document.getElementById(tableid);
+            var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML };
+            window.open(this.uri + this.base64(this.format(this.template, ctx)));
+        },
+    },
 };
\ No newline at end of file
diff --git a/ReportService/wwwroot/report/报表1.html b/ReportService/wwwroot/report/报表1.html
index b845cf8..942f29f 100644
--- a/ReportService/wwwroot/report/报表1.html
+++ b/ReportService/wwwroot/report/报表1.html
@@ -1,27 +1,29 @@
 ﻿<div id="findPerson">
     <div id="para" class="reportFilter">
-        <input type="hidden" name="ProcedureName" value="example" />
-        <input type="hidden" name="reportName" value="报表1" />
-        <input type="hidden" name="sqlStr" value="" />
+        <input type="hidden" name="ProcedureName" v-model="ProcedureName" />
+        <input type="hidden" name="reportName" v-model="reportName" />
+        <input type="hidden" name="sqlStr" v-model="sqlStr" />
         <input type="hidden" name="uid" v-model="uid" />
         <input type="hidden" name="uName" v-model="uName" />
-
+        <!--以下部分为查询条件，根据实际需要修改-->
         <label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label>
         <label>地址:<input name="address" value="" placeholder="输入地址数据" /></label>
         <label>地址:<input name="marry" value="" placeholder="是否结婚" /></label>
         <button class="btn btn-primary" v-on:click="find">查询</button>
         <button class="btn btn-primary" v-on:click="print">打印</button>
-        <button class="btn btn-primary" v-on:click="print">打印</button>
+        <button class="btn btn-primary" v-on:click="down" v-if="result.length > 0">下载EXCEL</button>
+        <!--可修改部分结束-->
     </div>
     <div id="result" v-if="result.length > 0">
+        <!--以下部分为存储过程返回数据，根据实际需要修改-->
         <table class="table reportTable" id="resultTable">
             <thead>
                 <tr>
-                    <td>姓名</td>
-                    <td>年龄</td>
-                    <td>性别</td>
-                    <td>登录用户编号</td>
-                    <td>登录用户名</td>
+                    <th>姓名</th>
+                    <th>年龄</th>
+                    <th>性别</th>
+                    <th>登录用户编号</th>
+                    <th>登录用户名</th>
                 </tr>
             </thead>
             <tbody>
@@ -34,6 +36,7 @@
                 </tr>
             </tbody>
         </table>
+        <!--可修改部分结束-->
     </div>
 </div>
 
@@ -41,6 +44,13 @@
     var findPerson = new Vue({
         el: "#findPerson",
         data: {
+            //存储过程名称
+            ProcedureName: "example",
+            //报表名称
+            reportName: "报表1",
+
+            //除非你知道以下数据含义，否则不要修改
+            sqlStr: "",
             url: myjs.urls.getresult,
             result: [],
             uid: "",
@@ -53,7 +63,7 @@
         methods: {
             find() {
                 var sql = myjs.createSql("#para");
-                $("input[name='sqlStr']").val(sql);
+                this.sqlStr = sql;
                 console.log(sql);
                 myjs.post(this.url, { sql: sql }, function (d) {
                     findPerson.result = d;
@@ -61,9 +71,12 @@
             },
             print() {
                 var sql = myjs.createSql("#para");
-                $("input[name='sqlStr']").val(sql);
+                this.sqlStr = sql;
                 myjs.print();
             },
+            down() {
+                myjs.toExcel.tableToExcel("resultTable", this.reportName);
+            },
         }
     });
 </script>
