JavaScript导出图片和数据到Excel 

  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>

 

posted @ 2019-11-20 16:22  物极必反iii  阅读(2246)  评论(0)    收藏  举报