2013-03-05 12 views
12


Tôi đang cố chuyển đổi các bảng HTML thành Excel, tôi đã thử với một hàm JavaScript chuyển đổi một bảng đơn giản thành Excel, nó hoạt động tốt. Nếu tôi có nhiều bảng, tôi sẽ có thể thêm tất cả dữ liệu bảng vào tệp Excel như thế nào. đây là những gì tôi đã thử. Tôi đã tạo 2 bảng và được cung cấp chỉ mục bảng testTabletestTable1.JavaScript - xuất dữ liệu bảng HTML vào Excel

Làm cách nào để chuyển 2 id bảng này cho hàm JavaScript khi nhấp vào nút? ngay bây giờ chỉ cần nhấp vào nút, bảng đầu tiên được xuất sang Excel khi tôi chỉ chuyển qua 'testTable'. làm cách nào để tôi có thể xuất nhiều bảng, ví dụ: testTable, testTable1 vào Excel?

Đây là JavaScript:

<script> 

var tableToExcel = (function() { 
var 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><!--[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>{table}</table></body></html>' 
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } 
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } 
return function(table, name) { 
if (!table.nodeType) table = document.getElementById(table) 
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} 
window.location.href = uri + base64(format(template, ctx)) 
} 
})() 

</script> 

Dưới đây là phần HTML,

<table id="testTable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>ACP</th> 
      <th>OEMCP</th> 
      <th>Unix<br> 
       NT 3.1</th> 
      <th>Unix<br> 
       NT 3.51</th> 
      <th>Unix<br> 
       95</th> 
     </tr> 
    </thead> 
</table> 
<table id="testTable1"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>ACP</th> 
      <th>OEMCP</th> 
      <th>Windows<br> 
       NT 3.1</th> 
      <th>Windows<br> 
       NT 3.51</th> 
      <th>Windows<br> 
       95</th> 
     </tr> 
    </thead> 
</table> 

Xin vui lòng cho tôi biết, làm thế nào điều này có thể được thực hiện?
Cảm ơn

+0

bạn không thể sử dụng dịch vụ web cho vấn đề này. Nó cũng sẽ hoạt động mà không cần đăng lại. – osmanraifgunes

Trả lời

9

Tôi khuyên bạn nên một phương pháp Format. John Resig micro-template là một công cụ rất tốt và đơn giản để làm những gì bạn cần. (ejohn microtemplating)

(function(){ 
    var cache = {}; 

    this.tmpl = function tmpl(str, data){ 
    // Figure out if we're getting a template, or if we need to 
    // load the template - and be sure to cache the result. 
    var fn = !/\W/.test(str) ? 
     cache[str] = cache[str] || 
     tmpl(document.getElementById(str).innerHTML) : 

     // Generate a reusable function that will serve as a template 
     // generator (and which will be cached). 
     new Function("obj", 
     "var p=[],print=function(){p.push.apply(p,arguments);};" + 

     // Introduce the data as local variables using with(){} 
     "with(obj){p.push('" + 

     // Convert the template into pure JavaScript 
     str.replace(/[\r\t\n]/g, " ") 
       .split("{{").join("\t") 
       .replace(/((^|}})[^\t]*)'/g, "$1\r") 
       .replace(/\t=(.*?)}}/g, "',$1,'") 
       .split("\t").join("');") 
       .split("}}").join("p.push('") 
       .split("\r").join("\\'") 
       + "');}return p.join('');"); 

    // Provide some basic currying to the user 
    return data ? fn(data) : fn; 
    }; 
})(); 

Nó rất dễ sử dụng. Điều này cho phép không chỉ hiển thị các biến giữa HTML mà còn thực thi mã JavaScript

Chuỗi mẫu của bạn cần một số sửa đổi để làm việc với microtemplate này.

{{for(var i=0; i<tables.length;i++){ }} 
    <table> 
     {{=tables[i]}} 
    </table> 
{{ } }} 

cuối cùng chỉ cần chọn tất cả các bảng xuất hiện trong ví dụ của bạn

document.getElementsByTagName("table"); 

bạn có thể xem làm thế nào nó hoạt động http://jsfiddle.net/Scipion/P8rpn/1/

+0

Cảm ơn một tấn Scipion! Tôi chỉ muốn biết liệu tôi có thể thực hiện chức năng này khi nhấp vào nút html ... Tôi đã thử với điều này nhưng điều này không hoạt động .... Làm thế nào nó hoạt động trên jsFiddle? Nếu tôi thực hiện tương tự trong html tôi không thể nhận được các tập tin trên nhấp vào nút. Vui lòng cho tôi biết nếu điều này là có thể. – shockwave

+1

thử và thêm sự kiện nhấp chuột.function download() { tableToExcel (document.getElementsByTagName ("bảng"), "một"); } var btn = document.getElementById ("btn"); btn.addEventListener ("nhấp", tải xuống); http://jsfiddle.net/Scipion/P8rpn/3/ – Scipion

+0

Cảm ơn rất nhiều !! Điều này làm việc như một say mê! :) – shockwave

0

tạo một hàm và vượt qua tableID để nó

function passing_id_to_excel(tableID){ 
    var myTableid = 
document.getElementById(tableID) //remaining code } 
+0

Tôi sẽ chuyển nhiều tableID như thế nào? – shockwave

0
  1. Thêm một hộp kiểm cho mỗi bảng. Sử dụng javascript để xử lý những người được kiểm tra.
  2. Trong trường hợp nếu bạn chỉ muốn chuyển đổi mọi bảng, bạn có thể sử dụng $('table').each(function() { do something }).