JavaScript導出圖片和數據到Excel

本文轉載自查看原文 2019-11-20 16:22 354
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>html 表格導出道</title>
  6     
  7 </head>
  8 <body>
  9 
 10     <div id="myDiv">
 11         <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
 12             <tr>
 13                 <td colspan="5" align="center">導出表格</td>
 14             </tr>
 15             <tr style='background-color: #FFC000;text-align: center;'>
 16                 <td>列標題1</td>
 17                 <td>列標題2</td>
 18                 <td>類標題3</td>
 19                 <td>列標題4</td>
 20                 <td>列標題5</td>
 21             </tr>
 22             <tr style='text-align: center;'>
 23                 <td>C#</td>
 24                 <td>C#</td>
 25                 <td>C#</td>
 26                 <td>C#</td>
 27                 <td style="width:90px;height:90px"><img src="https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=2119104196,3415431123&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=9f812168261acabfeb2c18c47e3f7163" alt="Alternate Text" width="90" height="90" /></td>
 28             </tr>
 29             <tr style='text-align: center;'>
 30                 <td>JAVA</td>
 31                 <td>JAVA</td>
 32                 <td>JAVA</td>
 33                 <td>JAVA</td>
 34                 <td style="width:90px;height:90px"><img src="https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=950913148,2126038573&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=fb1a5132e277ce583ff63d4adbea41ff" alt="Alternate Text" width="90" height="90" /></td>
 35             </tr>
 36             <tr style='text-align: center;'>
 37                 <td>Python</td>
 38                 <td>Python</td>
 39                 <td>Python</td>
 40                 <td>Python</td>
 41                 <td style="width:90px;height:90px"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1412542259,3348084760&fm=202&mola=new&crop=v1" alt="Alternate Text" width="90" height="90" /></td>
 42             </tr>
 43         </table>
 44         <a id="downloadExl" name="btnSubmit" text="生成報價單" onclick="method()" class="btn" style="border:0;background: #58B5E1;color: #fff;padding: 7px 30px;margin-top: 3px;float: left;cursor:pointer;margin-right: 12px;">生成表格</a>
 45     </div>
 46 </body>
 47 <script language="JavaScript" type="text/javascript">
 48 
 49     //判斷是否IE瀏覽器
 50     function isIE() {
 51         if (!!window.ActiveXObject || "ActiveXObject" in window) {
 52             return true;
 53         } else {
 54             return false;
 55         }
 56     }
 57 
 58     function method() {
 59         
 60         if (isIE()) {
 61             var lHtml = document.getElementById("tableExcel").innerHTML;
 62             var tableHtml = '<html><head><meta charset="UTF-8"></head><body><table id="tableExcel" width="60%" border="1" cellspacing="0" cellpadding="0">';
 63             tableHtml += lHtml;
 64             tableHtml += '</table></body></html>';
 65             var excelBlob = new Blob([tableHtml], { type: 'application/vnd.ms-excel' });
 66             var fileName = "表格.xls";
 67             window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
 68         } else {
 69             //var oa = document.createElement('a');
 70             //oa.href = URL.createObjectURL(excelBlob);
 71             //oa.download = fileName;
 72             //document.body.appendChild(oa);
 73             //oa.click();
 74             exec();//帶背景json
 75         }
 76 
 77     }
 78 
 79     var idTmr;
 80     function exec() {
 81         var tHeader = ['列標題1', '列標題2', '列標題3', '列標題4', '列標題5'];
 82         var tbody = [
 83             {
 84                 "列標題1": "C#",
 85                 "列標題2": "C#",
 86                 "列標題3": "C#",
 87                 "列標題4": "C#",
 88                 "列標題5": "https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=2119104196,3415431123&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=9f812168261acabfeb2c18c47e3f7163",
 89             },
 90             {
 91                 "列標題1": "JAVA",
 92                 "列標題2": "JAVA",
 93                 "列標題3": "JAVA",
 94                 "列標題4": "JAVA",
 95                 "列標題5": "https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=950913148,2126038573&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=fb1a5132e277ce583ff63d4adbea41ff",
 96             },
 97             {
 98                 "列標題1": "Python",
 99                 "列標題2": "Python",
100                 "列標題3": "Python",
101                 "列標題4": "Python",
102                 "列標題5": "https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1412542259,3348084760&fm=202&mola=new&crop=v1",
103             },
104         ];
105         export2Excel(tHeader, tbody, '表格');
106     }
107 
108     function getExplorer() {
109 
110         var explorer = window.navigator.userAgent;
111         //ie
112         if (explorer.indexOf("MSIE") >= 0) {
113             return 'ie';
114         }
115             //firefox
116         else if (explorer.indexOf("Firefox") >= 0) {
117             return 'Firefox';
118         }
119             //Chrome
120         else if (explorer.indexOf("Chrome") >= 0) {
121             return 'Chrome';
122         }
123             //Opera
124         else if (explorer.indexOf("Opera") >= 0) {
125             return 'Opera';
126         }
127             //Safari
128         else if (explorer.indexOf("Safari") >= 0) {
129             return 'Safari';
130         }
131     }
132 
133     function Cleanup() {
134         window.clearInterval(idTmr);
135     }
136     // 非ie瀏覽器下執行
137     const tableToNotIE = (function () {
138         // 編碼要用utf-8不然默認gbk會出現中文亂碼
139         let uri = 'data:application/vnd.ms-excel;base64,',
140           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]--></head><body><table width="60%" border="1">{table}</table></body></html>',
141           base64 = function (s) {
142               return window.btoa(unescape(encodeURIComponent(s)));
143 
144           },
145 
146           format = (s, c) => {
147               return s.replace(/{(\w+)}/g,
148                 (m, p) => {
149                     return c[p];
150                 })
151           }
152         return (table, name) => {
153             let ctx = {
154                 worksheet: name,
155                 table
156                 }
157 
158               if (navigator.userAgent.indexOf("Firefox") > -1) {
159                 window.location.href = uri + base64(format(template, ctx))
160               } else {
161                   //創建下載
162                   let link = document.createElement('a');
163                   link.setAttribute('href', uri + base64(format(template, ctx)));
164 
165                   link.setAttribute('download', name);
166 
167 
168                   // window.location.href = uri + base64(format(template, ctx))
169                   link.click();
170               }
171         }
172     })()
173 
174     // 導出函數
175     const export2Excel = (theadData, tbodyData, dataname) => {
176 
177         let re = /http/ // 字符串中包含http,則默認為圖片地址
178         let th_len = theadData.length // 表頭的長度
179         let tb_len = tbodyData.length // 記錄條數
180         let width = 90 // 設置圖片大小
181         let height = 90
182 
183         // 添加表頭信息
184         let thead = '<thead><tr>'
185         for (let i = 0; i < th_len; i++) {
186             thead += '<th>' + theadData[i] + '</th>'
187         }
188         thead += '</tr></thead>'
189 
190         // 添加每一行數據
191         let tbody = '<tbody>'
192         for (let i = 0; i < tb_len; i++) {
193             tbody += '<tr>'
194             let row = tbodyData[i] // 獲取每一行數據
195 
196             for (let key in row) {
197                 if (re.test(row[key])) { // 如果為圖片，則需要加div包住圖片
198                     //
199                     tbody += '<td style="width:' + width + 'px; height:' + height + 'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' + row[key] + '\' ' + ' ' + 'width=' + '\"' + width + '\"' + ' ' + 'height=' + '\"' + height + '\"' + '></div></td>'
200                 } else {
201                     tbody += '<td style="text-align:center">' + row[key] + '</td>'
202                 }
203             }
204             tbody += '</tr>'
205         }
206         tbody += '</tbody>'
207 
208         let table = thead + tbody
209 
210         // 導出表格
211         tableToNotIE(table, dataname)
212     }
213 </script>
214 </html>
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 Java實現PDF和Excel生成和數據動態插入以及導出 OpenXml Excel數據導入導出(含圖片的導入導出) Javascript導出Excel的方法【NPOI】導出Excel帶圖片使用C#或javascript將Table里的數據導出到Excel excel導出圖片設置 tp5 數據庫信息導出到excel(帶圖片) EasyPoi根據模板導出數據，並在Excel中插入多張圖片 SpringBoot圖文教程10—模板導出|百萬數據Excel導出|圖片導出「easypoi」 javascript導出csv文件（excel）