实现办法下载jquery的excel导出插件点击打开链接,此插件需要base64编码,所以在引用的时候也需要在引用64位编码的js脚本,例如
<script src="jquery-1.10.2.js"></script>
<script src="tableExport.js"></script>
<script src="jquery.base64.js"></script>
使用方法:
<button type="button" οnclick="$('#tb_doc_m').tableExport({ type: 'excel', separator: ';', escape: 'false' });" class="btn btn-default">
<i class="glyphicon glyphicon-search">导出Excel</i>
</button>
<table class="table" id="tb_doc_m">
.....
</table>
如果要导出表头需要设置完整的table,如thread,tbody等标准的html5表格。
额外注意:由于下载的脚本无法解决中文导出问题所以需要修改base64编码的js脚本,以及在tableexport使用base64编码脚本的部分。
已经修改完成的脚本如下:
http://download.csdn.net/detail/huangyezi/8782953
或者:
003 | tableExport: function(options) { |
007 | tableName: 'yourTableName' , |
016 | var options = $.extend(defaults, options); |
019 | if (defaults.type == 'csv' || defaults.type == 'txt' ){ |
023 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
025 | $( this ).filter( ':visible' ).find( 'th' ).each(function(index,data) { |
026 | if ($( this ).css( 'display' ) != 'none' ){ |
027 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
028 | tdData += '"' + parseString($( this )) + '"' + defaults.separator; |
033 | tdData = $.trim(tdData); |
034 | tdData = $.trim(tdData).substring( 0 , tdData.length - 1 ); |
038 | $(el).find( 'tbody' ).find( 'tr' ).each(function() { |
040 | $( this ).filter( ':visible' ).find( 'td' ).each(function(index,data) { |
041 | if ($( this ).css( 'display' ) != 'none' ){ |
042 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
043 | tdData += '"' + parseString($( this )) + '"' + defaults.separator; |
048 | tdData = $.trim(tdData).substring( 0 , tdData.length - 1 ); |
052 | if (defaults.consoleLog == 'true' ){ |
055 | var base64data = "base64," + $.base64.encode(tdData); |
056 | window.open( 'data:application/' +defaults.type+ ';filename=exportData;' + base64data); |
057 | } else if (defaults.type == 'sql' ){ |
060 | var tdData = "INSERT INTO `" +defaults.tableName+ "` (" ; |
061 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
063 | $( this ).filter( ':visible' ).find( 'th' ).each(function(index,data) { |
064 | if ($( this ).css( 'display' ) != 'none' ){ |
065 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
066 | tdData += '`' + parseString($( this )) + '`,' ; |
071 | tdData = $.trim(tdData); |
072 | tdData = $.trim(tdData).substring( 0 , tdData.length - 1 ); |
074 | tdData += ") VALUES " ; |
076 | $(el).find( 'tbody' ).find( 'tr' ).each(function() { |
078 | $( this ).filter( ':visible' ).find( 'td' ).each(function(index,data) { |
079 | if ($( this ).css( 'display' ) != 'none' ){ |
080 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
081 | tdData += '"' + parseString($( this )) + '",' ; |
086 | tdData = $.trim(tdData).substring( 0 , tdData.length - 1 ); |
089 | tdData = $.trim(tdData).substring( 0 , tdData.length - 1 ); |
095 | if (defaults.consoleLog == 'true' ){ |
099 | var base64data = "base64," + $.base64.encode(tdData); |
100 | window.open( 'data:application/sql;filename=exportData;' + base64data); |
103 | } else if (defaults.type == 'json' ){ |
105 | var jsonHeaderArray = []; |
106 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
108 | var jsonArrayTd = []; |
110 | $( this ).filter( ':visible' ).find( 'th' ).each(function(index,data) { |
111 | if ($( this ).css( 'display' ) != 'none' ){ |
112 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
113 | jsonArrayTd.push(parseString($( this ))); |
117 | jsonHeaderArray.push(jsonArrayTd); |
122 | $(el).find( 'tbody' ).find( 'tr' ).each(function() { |
124 | var jsonArrayTd = []; |
126 | $( this ).filter( ':visible' ).find( 'td' ).each(function(index,data) { |
127 | if ($( this ).css( 'display' ) != 'none' ){ |
128 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
129 | jsonArrayTd.push(parseString($( this ))); |
133 | jsonArray.push(jsonArrayTd); |
137 | var jsonExportArray =[]; |
138 | jsonExportArray.push({header:jsonHeaderArray,data:jsonArray}); |
145 | if (defaults.consoleLog == 'true' ){ |
146 | console.log(JSON.stringify(jsonExportArray)); |
148 | var base64data = "base64," + $.base64.encode(JSON.stringify(jsonExportArray)); |
149 | window.open( 'data:application/json;filename=exportData;' + base64data); |
150 | } else if (defaults.type == 'xml' ){ |
152 | var xml = '<?xml version="1.0" encoding="utf-8"?>' ; |
153 | xml += '<tabledata><fields>' ; |
155 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
156 | $( this ).filter( ':visible' ).find( 'th' ).each(function(index,data) { |
157 | if ($( this ).css( 'display' ) != 'none' ){ |
158 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
159 | xml += "<field>" + parseString($( this )) + "</field>" ; |
164 | xml += '</fields><data>' ; |
168 | $(el).find( 'tbody' ).find( 'tr' ).each(function() { |
169 | xml += '<row id="' +rowCount+ '">' ; |
171 | $( this ).filter( ':visible' ).find( 'td' ).each(function(index,data) { |
172 | if ($( this ).css( 'display' ) != 'none' ){ |
173 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
174 | xml += "<column-" +colCount+ ">" +parseString($( this ))+ "</column-" +colCount+ ">" ; |
182 | xml += '</data></tabledata>' |
184 | if (defaults.consoleLog == 'true' ){ |
188 | var base64data = "base64," + $.base64.encode(xml); |
189 | window.open( 'data:application/xml;filename=exportData;' + base64data); |
190 | } else if (defaults.type == 'excel' || defaults.type == 'doc' || defaults.type == 'powerpoint' ){ |
194 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
197 | $( this ).find( 'th' ).each(function(index,data) { |
198 | if ($( this ).css( 'display' ) != 'none' ){ |
199 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
200 | var colspan = $( this ).attr( 'colspan' ); |
201 | if (!colspan) colspan = 1 ; |
202 | excel += "<td style='text-align: center; vertical-align: middle;' colspan='" + colspan + "'>" + parseString($( this ))+ "</td>" ; |
207 | $( this ).find( 'td' ).each(function(index,data) { |
208 | if ($( this ).css( 'display' ) != 'none' ){ |
209 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
210 | var colspan = $( this ).attr( 'colspan' ); |
211 | var rowspan = $( this ).attr( 'rowspan' ); |
212 | if (!colspan) colspan = 1 ; |
213 | if (!rowspan) rowspan = 1 ; |
214 | excel += "<td style='text-align:center;' colspan='" + colspan + "' rowspan='" + rowspan + "'>" + parseString($( this ))+ "</td>" ; |
224 | $(el).find( 'tbody' ).find( 'tr' ).each(function() { |
228 | $( this ).find( 'td' ).each(function(index,data) { |
229 | if ($( this ).css( 'display' ) != 'none' ){ |
230 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
231 | var rowspan = $( this ).attr( 'rowspan' ); |
232 | if (!rowspan) rowspan = 1 ; |
233 | excel += "<td rowspan='" + rowspan + "' style='color:" + $( this ).css('color ') + "' >"+parseString($( this ))+ "</td>" ; |
243 | if (defaults.consoleLog == 'true' ){ |
247 | var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" +defaults.type+ "' xmlns='http://www.w3.org/TR/REC-html40'>" ; |
248 | excelFile += "<head>" ; |
249 | excelFile += "<!--[if gte mso 9]>" ; |
250 | excelFile += "<xml>" ; |
251 | excelFile += "<x:ExcelWorkbook>" ; |
252 | excelFile += "<x:ExcelWorksheets>" ; |
253 | excelFile += "<x:ExcelWorksheet>" ; |
254 | excelFile += "<x:Name>" ; |
255 | excelFile += "{worksheet}" ; |
256 | excelFile += "</x:Name>" ; |
257 | excelFile += "<x:WorksheetOptions>" ; |
258 | excelFile += "<x:DisplayGridlines/>" ; |
259 | excelFile += "</x:WorksheetOptions>" ; |
260 | excelFile += "</x:ExcelWorksheet>" ; |
261 | excelFile += "</x:ExcelWorksheets>" ; |
262 | excelFile += "</x:ExcelWorkbook>" ; |
263 | excelFile += "</xml>" ; |
264 | excelFile += "<![endif]-->" ; |
265 | excelFile += "</head>" ; |
266 | excelFile += "<body>" ; |
268 | excelFile += "</body>" ; |
269 | excelFile += "</html>" ; |
270 | var base64data = "base64," + $.base64({ data: excelFile, type: 0 }); |
272 | $( '<a style="display:none" href="data:application/vnd.ms-' +defaults.type+ ';filename=exportData.doc;' +base64data+ '" download="' +defaults.tableName.toString()+ '.xls"><span></span></a>' ).appendTo(document.body).find( 'span' ).trigger( "click" ).parent().remove(); |
273 | } else if (defaults.type == 'png' ){ |
275 | onrendered: function(canvas) { |
276 | var img = canvas.toDataURL( "image/png" ); |
282 | } else if (defaults.type == 'pdf' ){ |
284 | var doc = new jsPDF( 'p' , 'pt' , 'a4' , true ); |
285 | doc.setFontSize(defaults.pdfFontSize); |
288 | var startColPosition=defaults.pdfLeftMargin; |
289 | $(el).find( 'thead' ).find( 'tr' ).each(function() { |
290 | $( this ).filter( ':visible' ).find( 'th' ).each(function(index,data) { |
291 | if ($( this ).css( 'display' ) != 'none' ){ |
292 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
293 | var colPosition = startColPosition+ (index * 50 ); |
294 | doc.text(colPosition, 20 , parseString($( this ))); |
302 | var startRowPosition = 20 ; var page = 1 ;var rowPosition= 0 ; |
303 | $(el).find( 'tbody' ).find( 'tr' ).each(function(index,data) { |
306 | if (rowCalc % 26 == 0 ){ |
309 | startRowPosition=startRowPosition+ 10 ; |
311 | rowPosition=(startRowPosition + (rowCalc * 10 )) - ((page - 1 ) * 280 ); |
313 | $( this ).filter( ':visible' ).find( 'td' ).each(function(index,data) { |
314 | if ($( this ).css( 'display' ) != 'none' ){ |
315 | if (defaults.ignoreColumn.indexOf(index) == - 1 ){ |
316 | var colPosition = startColPosition+ (index * 50 ); |
317 | doc.text(colPosition,rowPosition, parseString($( this ))); |
326 | doc.output( 'datauri' ); |
331 | function parseString(data){ |
333 | if (defaults.htmlContent == 'true' ){ |
334 | content_data = data.html().trim(); |
336 | content_data = data.text().trim(); |
339 | if (defaults.escape == 'true' ){ |
340 | content_data = escape(content_data); |