Come posso esportare tabelle in Excel da una pagina web [chiusa]

97

Come posso esportare tabelle in Excel da una pagina web. Voglio che l'esportazione contenga tutta la formattazione e i colori.

javascript  jquery  export-to-excel 
— codice511788465541441
fonte
9
Il modo più semplice è probabilmente esportare un documento HTML, che Excel può aprire.
— Pekka
@Pekka l'ho provato, perde tutta la formattazione / css / dimensione della colonna ecc.
— codice511788465541441
3
@user dove stai dichiarando le dimensioni delle colonne e simili? Non ho una profonda familiarità con l'esportazione dei dati in Excel, ma potrebbe essere necessario dichiararli in linea, ad esempio<td style="background-color: ...
— Pekka
@user - ci sono almeno due diversi problemi qui: 1) formattare i dati in modo che appaiano correttamente in Excel e 2) esportare i dati utilizzando Javascript in modo che imposti correttamente il tipo MIME, chiedendo all'utente di salvare il file . Stai cercando di risolvere entrambi questi problemi?
— nrabinowitz
10
Perché questo è stato considerato "basato sull'opinione"? Questa è una domanda tecnica molto semplice.
— brandizzi

Risposte:

75

Di gran lunga, l'esportazione più pulita e semplice da tabelle a Excel è il plug-in Jquery DataTables Table Tools. Ottieni una griglia che ordina, filtra, ordina e impagina i tuoi dati e, con solo poche righe di codice in più e due piccoli file inclusi, ottieni l'esportazione in Excel, PDF, CSV, negli appunti e nella stampante.

Questo è tutto il codice richiesto:

  $(document).ready( function () {
    $('#example').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
        }
    } );
} );

Quindi, veloce da implementare, nessuna limitazione del browser, nessun linguaggio lato server richiesto e soprattutto molto FACILE da capire. È una vittoria per tutti. L'unica cosa su cui ha dei limiti, tuttavia, è la formattazione rigorosa delle colonne.

Se la formattazione ei colori sono dei veri e propri rompicapo, l'unico metodo affidabile al 100% per il browser che ho trovato è quello di utilizzare un linguaggio lato server per elaborare i file Excel corretti dal codice. La mia soluzione preferita è PHPExcel. È l'unico che ho trovato finora che gestisce positivamente l'esportazione con la formattazione in una versione MODERNA di Excel da qualsiasi browser quando non gli dai altro che HTML. Permettetemi di chiarire, però, non è sicuramente così facile come la prima soluzione, ed è anche un po 'un maiale di risorse. Tuttavia, il lato positivo può anche essere stampato direttamente in PDF. E, una volta configurato, funziona sempre.

AGGIORNAMENTO - 15 settembre 2016: TableTools è stato interrotto a favore di un nuovo plugin chiamato " pulsanti " Questi strumenti svolgono le stesse funzioni della vecchia estensione TableTools, ma sono MOLTO più facili da installare e fanno uso di download HTML5 per i browser moderni, con la capacità di eseguire il fallback al download Flash originale per i browser che non supportano lo standard HTML5. Come puoi vedere dai molti commenti da quando ho pubblicato questa risposta nel 2011, il principale punto debole di TableTools è stato affrontato. Non posso ancora raccomandare abbastanza DataTables per gestire semplicemente grandi quantità di dati, sia per lo sviluppatore che per l'utente.

— bpeterson76
fonte
2
DataTables è completamente Javascript. Solo l'elemento TableTools utilizza Flash ed è minuscolo. Non userei MAI Flash volentieri in nessuno dei miei prodotti!
— bpeterson76
16
Capisco e sono d'accordo. Ma ancora - per quanto minuscolo - c'è un oggetto .swf lì e non può essere eseguito senza Flash.
— magma
8
Un'ottima soluzione, ma è un peccato che abbia bisogno di Flash.
— jnthnclrk
Ciao, puoi mostrare un esempio completo, sono troppo noob per farlo funzionare senza l'esempio!
— NoobTom
1
@PramodGaikwad, no, Datatables sostituirebbe NG-table. Hanno effettivamente la stessa funzionalità, ma Datatables è MOLTO più maturo e ha molte, molte più funzionalità. Esiste uno spinoff di Datatables creato appositamente per Angular: l-lin.github.io/angular-datatables/#/welcome
— bpeterson76
42

Molto tempo fa, ho scoperto che Excel aprirebbe un file HTML con una tabella se lo inviamo con il tipo di contenuto Excel. Considera il documento sopra:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>    
</body>
</html>

Ho eseguito il seguente bookmarklet su di esso:

javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);

e infatti l'ho ottenuto scaricabile come file Excel. Tuttavia , non ho ottenuto il risultato atteso: il file era aperto in OpenOffice.org Writer. Questo è il mio problema: non ho Excel in questa macchina, quindi non posso provarlo meglio. Inoltre, questo trucco ha funzionato più o meno sei anni fa con browser meno recenti e una versione antica di MS Office, quindi non posso davvero dire se funzionerà oggi.

Ad ogni modo, nel documento sopra ho aggiunto un pulsante che scaricherebbe l'intero documento come file Excel, in teoria:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr>
      <td colspan="2">
        <button onclick="window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);">
            Get as Excel spreadsheet
        </button>
      </td>
    </tr>
  </table>    
</body>
</html>

Salvalo in un file e fai clic sul pulsante. Mi piacerebbe piace sapere se ha funzionato o meno, quindi vi chiedo di commentare, anche per dire che non ha funzionato.

— brandizzi
fonte
11
Ha funzionato aggiungendo una sostituzione alla fine: window.open ('data: application / vnd.ms-excel,' + document.getElementById ('table'). OuterHTML.replace (/ / g, '% 20')) ;
— VSP
6
Modo alternativo (consigliato): window.open ('data: application / vnd.ms-excel,' + encodeURIComponent (document.getElementById ('table'). OuterHTML));
— VSP
5
Funziona perfettamente in Firefox, racchiudi la tua tabella in un div e quindi chiama l'id con document.getElementById('id').innerHTMLper afferrare selettivamente solo la tabella, altrimenti tutte le tue cose vengono esportate nel foglio di calcolo. Non funziona nella vecchia IE, tuttavia, apre solo una nuova finestra con tutto l'html nel titolo
— Abraham Brookes
1
Questa semplice soluzione funziona perfettamente. Guarda questa domanda duplicata per poter impostare il nome del file e anche il nome del foglio di lavoro. Stesso tipo di soluzione; stackoverflow.com/questions/17126453/...
— Espen Schulstad
2
Questo non funziona più in Office 365 a causa di misure di sicurezza più rigorose. Il file Excel deve essere un VERO documento Excel o genererà un errore all'apertura.
— Phil
12

È possibile utilizzare il vecchio formato XML di Excel 2003 (prima di OpenXML) per creare una stringa che contiene l'XML desiderato, quindi sul lato client è possibile utilizzare un URI di dati per aprire il file utilizzando il tipo MIME XSL o inviare il file al client utilizzando il tipo MIME di Excel "Content-Type: application / vnd.ms-excel" dal lato server.

  1. Apri Excel e crea un foglio di lavoro con la formattazione e i colori desiderati.
  2. Salva la cartella di lavoro di Excel come "XML Spreadsheet 2003 (* .xml)"
  3. Apri il file risultante in un editor di testo come il blocco note e copia il valore in una stringa nella tua applicazione
  4. Supponendo che si utilizzi l'approccio lato client con un uri di dati, il codice sarebbe simile a questo: 
    
<script type="text/javascript">
var worksheet_template = '<?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+
             '<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+
             '<ss:Table>{{ROWS}}</ss:Table></ss:Worksheet></ss:Workbook>';
var row_template = '<ss:Row ss:StyleID="1"><ss:Cell><ss:Data ss:Type="String">{{name}}</ss:Data></ss:Cell></ss:Row>';
</script>
  5. Quindi puoi utilizzare la sostituzione della stringa per creare una raccolta di righe da inserire nel modello del foglio di lavoro 
    
<script type="text/javascript">
var rows = document.getElementById("my-table").getElementsByTagName('tr'),
  row_data = '';
for (var i = 0, length = rows.length; i < length; ++i) {
row_data += row_template.replace('{{name}}', rows[i].getElementsByTagName('td')[0].innerHTML);
}
</script>

  6. Una volta raccolte le informazioni, crea la stringa finale e apri una nuova finestra utilizzando l'URI dei dati 

    
<script type="text/javascript">
var worksheet = worksheet_template.replace('{{ROWS}}', row_data);
    


    window.open('data:application/vnd.ms-excel,'+worksheet);
</script>

Vale la pena notare che i browser meno recenti non supportano lo schema dell'URI dei dati, quindi potrebbe essere necessario produrre il lato file server per quei browser che non lo supportano.

Potrebbe anche essere necessario eseguire la codifica base64 sul contenuto dell'URI dei dati, che potrebbe richiedere una libreria js , oltre ad aggiungere la stringa "; base64" dopo il tipo mime nell'URI dei dati.

— samshull
fonte
Sebbene sia bello usare OpenXML, questa soluzione non funzionerà su tabelle con colonne o righe senza molto lavoro sul generatore di javascript
— Eduardo Molteni
1
Grazie per avermi insegnato qualcosa invece di dirmi di usare un plugin, molto apprezzato. Vale la pena ricordare che questo approccio funziona ancora bene oggi.
— Benjamin Gruenbaum
Interessante, ho provato questo approccio. Ho appena ricevuto l'intero <? Xml version = "1.0"?> <Ss: Workbook xmlns: ss = "urn: schemas-microsoft-com: office: spreadsheet"> '+' <ss: Styles> <ss: Style ss : ID = "1"> <ss: Font ss: Bold = "1" /> </ ss: Style> </ ss: Styles> <ss: Worksheet ss: Name = "Sheet1"> '+' <ss: Tabella> valori con le mie stringhe scritte in una cella, comprese tutte le righe in una cella. Cosa mi sto perdendo?
— CromeX
6

Excel ha una funzione poco conosciuta chiamata "query Web" che consente di recuperare i dati da quasi tutte le pagine Web senza ulteriore programmazione.

Una query web fondamentalmente esegue una richiesta HTTP direttamente da Excel e copia alcuni o tutti i dati ricevuti (e facoltativamente la formattazione) nel foglio di lavoro.

Dopo aver definito la query web, puoi aggiornarla in qualsiasi momento senza nemmeno uscire da Excel. Quindi non è necessario "esportare" i dati e salvarli in un file - preferiresti aggiornare i dati proprio come da un database.

Puoi persino utilizzare i parametri URL facendo in modo che Excel ti richieda determinati criteri di filtro, ecc ...

Tuttavia i contro che ho notato finora sono:

  • i dati caricati dinamicamente non sono accessibili, perché Javascript non viene eseguito
  • La lunghezza dell'URL è limitata

Ecco una domanda su come creare query Web in Excel. Si collega a un sito della Guida di Microsoft su come ottenere dati esterni da una pagina Web

— HAL 9000
fonte
Questo non funzionerà nemmeno se l'URL si trova dietro un muro di accesso.
— Achshar
Funziona con l'autenticazione di base e anche basata su modulo, ma con quest'ultima potrebbe essere necessario fare clic su "modifica query" per reinserire le credenziali e ottenere un nuovo cookie dal tempo
— HAL 9000
5

Questo è un php ma forse puoi cambiarlo in javascript:

<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<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\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
  $fname = "Export".time().".xls";
  $file = fopen($fname,"w+");
  fwrite($file,$excel);
  fclose($file);
  header('Content-Type: application/vnd.ms-excel');
  header('Content-Disposition: attachment; filename="'.basename($fname).'"');
  readfile($fname);
  unlink($fname); ?>
— RedSoxFan
fonte
5

Innanzitutto, non consiglierei di provare a esportare Html e spero che l'istanza di Excel dell'utente lo raccolga. La mia esperienza che questa soluzione è irta di problemi, comprese le incompatibilità con i client Macintosh e il lancio di un errore all'utente che il file in questione non è del formato specificato. La soluzione più a prova di proiettile e di facile utilizzo è quella lato server in cui si utilizza una libreria per creare un vero file Excel e inviarlo all'utente. La prossima soluzione migliore e più universale sarebbe quella di utilizzare il formato Open XML. Ho riscontrato alcuni rari problemi di compatibilità con le versioni precedenti di Excel, ma nel complesso questo dovrebbe darti una soluzione che funzionerà su qualsiasi versione di Excel, inclusi i Mac.

Apri XML

— Tommaso
fonte
4

Mozilla supporta ancora gli URI di base 64. Ciò ti consente di comporre dinamicamente il contenuto binario utilizzando javascript:

<a href="data:application/vnd.ms-excel<base64 encoded binary excel content here>"> download xls</a>

se il tuo file excel non è molto elaborato (niente diagrammi, formule, macro) puoi scavare nel formato e comporre byte per il tuo file, quindi codificarli con base64 e inserirli nell'href

fare riferimento a https://developer.mozilla.org/en/data_URIs

— Pavlonator
fonte
2

Questo è in realtà più semplice di quanto si pensi: "Basta" copiare la tabella HTML (ovvero: il codice HTML per la tabella) negli appunti. Excel sa come decodificare le tabelle HTML; proverà anche a preservare gli attributi.

La parte difficile è "copiare la tabella negli appunti" poiché non esiste un modo standard per accedere agli appunti da JavaScript. Vedi questo post del blog: Accesso agli Appunti di sistema con JavaScript: un Santo Graal?

Ora tutto ciò di cui hai bisogno è la tabella come HTML. Suggerisco jQuery e il metodo html () .

— Aaron Digulla
fonte
2

Questo codice è solo IE, quindi è utile solo in situazioni in cui sai che tutti i tuoi utenti useranno IE (come, ad esempio, in alcuni ambienti aziendali).

<script Language="javascript">
function ExportHTMLTableToExcel()
{
   var thisTable = document.getElementById("tbl").innerHTML;
   window.clipboardData.setData("Text", thisTable);
   var objExcel = new ActiveXObject ("Excel.Application");
   objExcel.visible = true;

   var objWorkbook = objExcel.Workbooks.Add;
   var objWorksheet = objWorkbook.Worksheets(1);
   objWorksheet.Paste;
}
</script>
— NakedBrunch
fonte
Ho provato a usare questo codice che ha aperto la tabella in Excel ma non il formato corretto sembra che abbia appena copiato il codice html nelle tabelle. come questo: <TD class = "" bgColor = # ed9fff> SARTIN, DAN </TD> <TD class = "" bgColor = # ed9fff> BALAEZ, BARBARA </TD> Qualche suggerimento?
— Fahad
Questo perché ha usato innerHTML. L'elemento che sta ottenendo è la tabella, quindi dovrebbe essere outerHTML. Ho apportato la modifica
— user1566694
Ottengo l'errore: "Il server di automazione non può creare l'oggetto" durante la creazione di ActiveXObject. Come posso risolverlo?
— Nk SP
2

Presupposti:

  1. URL fornito

  2. la conversione deve essere eseguita sul lato client

  3. i sistemi sono Windows, Mac e Linux

Soluzione per Windows:

codice python che apre la finestra ie e vi ha accesso: la variabile url contiene l'url ('http: //')

ie = Dispatch("InternetExplorer.Application")
ie.Visible = 1
ie.Navigate(theurl)

Nota: se la pagina non è accessibile direttamente, ma effettua il login, dovrai gestirlo inserendo i dati del form ed emulando le azioni dell'utente con python

ecco l'esempio

from win32com.client import Dispatch
ie.Document.all('username').value=usr
ie.Document.all('password').value=psw

allo stesso modo per il recupero dei dati dalla pagina web. Supponiamo che l'elemento con ID "el1" contenga i dati. recuperare il testo dell'elemento nella variabile

el1 = ie.Document.all('el1').value

quindi quando i dati sono nella variabile python, puoi aprire la schermata di Excel in modo simile usando python:

from win32com.client import Dispatch
xlApp = Dispatch("Excel.Application")
xlWb = xlApp.Workbooks.Open("Read.xls")
xlSht = xlWb.WorkSheets(1)
xlSht.Cells(row, col).Value = el1

Soluzione per Mac:

solo il suggerimento: usa AppleScript - ha un'API semplice e simile a win32com.client Dispatch

Soluzione per Linux:

java.awt.Robot potrebbe funzionare per questo, ha clic, pressione di un tasto (è possibile utilizzare i tasti di scelta rapida), ma nessuna API per Linux di cui sono a conoscenza può funzionare in modo semplice come AppleScript

— Pavlonator
fonte
1

la semplice ricerca su Google ha rilevato questo:

Se i dati sono in realtà una pagina HTML e NON sono stati creati da ASP, PHP o qualche altro linguaggio di scripting e stai utilizzando Internet Explorer 6 e hai installato Excel sul tuo computer, fai semplicemente clic con il tasto destro sulla pagina e guarda attraverso il menu. Dovresti vedere "Esporta in Microsoft Excel". Se tutte queste condizioni sono vere, fare clic sulla voce di menu e dopo alcuni prompt verrà importata in Excel.

se non puoi farlo, offre un metodo alternativo di "trascinamento della selezione":

http://www.mrkent.com/tools/converter/

— SQueryL
fonte
0

Ci sono due modi pratici per farlo automaticamente, mentre solo una soluzione può essere utilizzata in tutti i browser. Prima di tutto dovresti usare la specifica xml aperta per creare il foglio Excel. Sono disponibili plug-in gratuiti di Microsoft che rendono questo formato disponibile anche per le versioni precedenti di Office. L'xml aperto è uno standard dall'ufficio 2007. I due modi sono evidenti sul lato server o sul lato client.

L'implementazione lato client utilizza un nuovo standard di CSS che consente di memorizzare i dati anziché solo l'URL dei dati. Questo è un ottimo approccio perché non è necessaria alcuna chiamata al server, solo i dati e un po 'di javascript. Il rovescio della medaglia è che Microsoft non supporta tutte le sue parti nelle attuali versioni di IE (non so di IE9). Microsoft limita i dati a un'immagine ma avremo bisogno di un documento. In Firefox funziona abbastanza bene. Per me l'IE era il punto di morte.

L'altro modo è utilizzare un'implementazione lato server. Dovrebbero esserci molte implementazioni di XML aperto per tutte le lingue. Devi solo prenderne uno. Nella maggior parte dei casi sarà il modo più semplice per modificare un Viewmodel per ottenere un documento, ma di sicuro puoi inviare tutti i dati da Clientside al server e fare lo stesso.

— sra
fonte
Può il votante negativo per favore commentare qual è il motivo del voto negativo?
— sra
0 
   function normalexport() {

       try {
           var i;
           var j;
           var mycell;
           var tableID = "tblInnerHTML";
           var drop = document.getElementById('<%= ddl_sections.ClientID %>');
           var objXL = new ActiveXObject("Excel.Application");
           var objWB = objXL.Workbooks.Add();
           var objWS = objWB.ActiveSheet;
           var str = filterNum(drop.options[drop.selectedIndex].text);
           objWB.worksheets("Sheet1").activate; //activate dirst worksheet
           var XlSheet = objWB.activeSheet; //activate sheet
           XlSheet.Name = str; //rename


           for (i = 0; i < document.getElementById("ctl00_ContentPlaceHolder1_1").rows.length - 1; i++) {
               for (j = 0; j < document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells.length; j++) {
                   mycell = document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells(j);

                   objWS.Cells(i + 1, j + 1).Value = mycell.innerText;

                   //                                                objWS.Cells(i + 1, j + 1).style.backgroundColor = mycell.style.backgroundColor;
               }
           }

           objWS.Range("A1", "L1").Font.Bold = true;
           //                objWS.Range("A1", "L1").Font.ColorIndex = 2;
           //                 objWS.Range("A1", "Z1").Interior.ColorIndex = 47;

           objWS.Range("A1", "Z1").EntireColumn.AutoFit();

           //objWS.Range("C1", "C1").ColumnWidth = 50;

           objXL.Visible = true;

       } catch (err) {
           alert("Error. Scripting for ActiveX might be disabled")
           return
       }
       idTmr = window.setInterval("Cleanup();", 1);

   }


   function filterNum(str) {

       return str.replace(/[ / ]/g, '');
   }
— Sameh el Behairy
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.