2013-06-15 28 views
26

Bir html tablosu bir Excel dosyasına kaydetmek için bu komut dosyasını kullanmaya çalışıyorum ve iyi çalışıyor, ancak uygun bir adla değil, rastgele bir dize ile gelmiyor. Ve neden göremiyorum. Sen a çapa elemanı için çağdaş browsera tarafından desteklenen download özelliğini kullanabilirsinizHTML Tablo için Excel Javascript

<input type="button" onclick="tableToExcel('tablename', 'name')" value="Export to Excel"> 

kodu

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)) 
} 
})() 
+0

Sen 'tableToExcel' için parametreleri 'adını' ve 'tabloismi' geçiyoruz ama işlevi –

+0

bu sorunu gidermek için nasıl anlarım herhangi bir parametre beyan etmiyor? Benim js çok iyi değil: P – Coolcrab

+0

Benim için çalışır ... –

cevap

47

:

Birlikte diyoruz. İlk görünmez bir çapa ekleyerek HTML değiştirin:

<a id="dlink" style="display:none;"></a> 

<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel"> 

Bildirim da çağrı tableToExcel çalışması için şimdi 3 parametresi vardır - Eğer dosya adı belirtin nerede.

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, filename) { 
      if (!table.nodeType) table = document.getElementById(table) 
      var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } 

      document.getElementById("dlink").href = uri + base64(format(template, ctx)); 
      document.getElementById("dlink").download = filename; 
      document.getElementById("dlink").click(); 

     } 
    })() 

Bildirimi son 3 kod hatları:

Şimdi orijinal işlevinin bu değiştirilmiş kodu kullanabilirsiniz yerine pencereye URL'yi atama - yeni çapa atamak ve daha sonra indirmeye zorlamak için yeni download özelliğini kullanmak Verilen dosya adı olarak ve daha sonra ankrajın click() yöntemini çağırın.

Bir deneyin.

+2

sorusuna cevap buldum Başar! Ad çalışır, ancak şimdi bu hatayı alıyorum: 'Açmaya çalıştığınız dosya 'name.xls', dosya uzantısında belirtilenden farklı bir biçimdir. Dosyayı açmadan önce dosyanın güvenilir olmadığını ve güvenilir bir kaynaktan geldiğini doğrulayın. ' – Coolcrab

+2

Bu normaldir, bunu daha önce de almış olmalısınız. Bu gerçekleşiyor çünkü dosya gerçek bir Excel değil, gizlilik içinde XML. Ancak bu uyarıdan sonra dosya yine de açılmalı. Uyarıdan kurtulmayı denemek için dosya uzantısıyla oynayabilirsiniz (örneğin .XML vb. Gibi) –

+1

Merhaba, bunun daha eski bir yazı olduğunu biliyorum, ancak Object özelliği veya yöntemi desteklemediğini belirten bir hata alıyorum 'btoa '. – seroth

2

Yukarıdaki 3 kod satırı benim durumumda çalışmıyor, ancak burada bulduğum şeyi ve umarım yardımcı olabilir.

function tableToExcel(table, name, filename) { 
 
     let 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"><title></title><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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>', 
 
     base64 = function(s) { return window.btoa(decodeURIComponent(encodeURIComponent(s))) },   format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; })} 
 
     
 
     if (!table.nodeType) table = document.getElementById(table) 
 
     var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} 
 

 
     var link = document.createElement('a'); 
 
     link.download = filename; 
 
     link.href = uri + base64(format(template, ctx)); 
 
     link.click(); 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<input 
 
    type="button" 
 
    onclick="tableToExcel('myTable', 'name', 'myfile.xls')" 
 
    value="Export to Excel" 
 
> 
 
<table id="myTable"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 

 
</body> 
 
</html>

+0

Snippet bozuk görünüyor. – WilomGfx

+0

Snippet, Chrome – brasofilo

+0

için benim için iyi çalıştı Bazen, çalışmak için "window.btoa" için UTF-8 kodlamamız gerekiyor. Bkz. 'Pencere' üzerinde 'btoa' yürütme başarısız: Kodlanacak dizge, Latin1 aralığının dışındaki karakterleri içerir.] (Https://stackoverflow.com/q/23223718/1287812) – brasofilo

İlgili konular