Eksport do CSV za pomocą jQuery i html

Mam dane tabelaryczne, które muszę wyeksportować do csv bez użycia zewnętrznej wtyczki lub api. Użyłem metody window.open przekazującej typy mime, ale napotkałem problemy jak poniżej:

Jak określić, czy Microsoft Excel lub Open Office jest zainstalowany w systemie za pomocą jquery

Kod powinien być niezależny od tego, co jest instalowane w systemie tj. openoffice czy ms excel. Uważam, że CSV to format, który można się spodziewać zarówno w redaktorów.

Kod

    <html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  

<script type="text/JavaScript">
$(document).ready(function(){
    $("#btnExport").click(function(e) {
        var msg = GetMimeTypes();
        //OpenOffice
        window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html());
        //MS-Excel
        window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
        //CSV
        window.open('data:application/csv,charset=utf-8,' + $('#dvData').html());
        e.preventDefault();
    });
});

function GetMimeTypes () {
    var message = "";
        // Internet Explorer supports the mimeTypes collection, but it is always empty
    if (navigator.mimeTypes && navigator.mimeTypes.length > 0) {
        var mimes = navigator.mimeTypes;
        for (var i=0; i < mimes.length; i++) {
            message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />";
        }
    }
    else {
        message = "Your browser does not support this ";
       //sorry!
    }

    return ( message);
}
</script>

</head>
<body>
<div id="dvData">
<table>
    <tr>
        <th>Column One </th>
        <th>Column Two</th>
        <th>Column Three</th>
    </tr>
    <tr>
        <td>row1 Col1</td>
        <td>row1 Col2</td>
        <td>row1 Col3</td>
   </tr>
   <tr>
        <td>row2 Col1</td>
        <td>row2 Col2</td>
        <td>row2 Col3</td>
   </tr>
      <tr>
        <td>row3 Col1</td>
        <td>row3 Col2</td>
        <td>row3 Col3</td>  
   </tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />

</body>

Błędy:

CSV: nierozpoznane przez przeglądarki

ODS & Excel: działa, ale nie jestem w stanie znaleźć, który z nich wygenerować, gdy system ma zainstalowany excel lub OpenOffice?

IE wersja 8: to całkowicie nie działa, otwiera się w nowym oknie i jak poniżej zrzut ekranu.

Tutaj wpisz opis obrazka

Author: Community, 2013-04-18

6 answers

Demo

Poniżej znajduje się Wyjaśnienie.

$(document).ready(function() {

  function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td)'),

      // Temporary delimiter characters unlikely to be typed by keyboard
      // This is to avoid accidentally splitting the actual contents
      tmpColDelim = String.fromCharCode(11), // vertical tab character
      tmpRowDelim = String.fromCharCode(0), // null character

      // actual delimiter characters for CSV format
      colDelim = '","',
      rowDelim = '"\r\n"',

      // Grab text from table into CSV formatted string
      csv = '"' + $rows.map(function(i, row) {
        var $row = $(row),
          $cols = $row.find('td');

        return $cols.map(function(j, col) {
          var $col = $(col),
            text = $col.text();

          return text.replace(/"/g, '""'); // escape double quotes

        }).get().join(tmpColDelim);

      }).get().join(tmpRowDelim)
      .split(tmpRowDelim).join(rowDelim)
      .split(tmpColDelim).join(colDelim) + '"';

    // Deliberate 'false', see comment below
    if (false && window.navigator.msSaveBlob) {

      var blob = new Blob([decodeURIComponent(csv)], {
        type: 'text/csv;charset=utf8'
      });

      // Crashes in IE 10, IE 11 and Microsoft Edge
      // See MS Edge Issue #10396033
      // Hence, the deliberate 'false'
      // This is here just for completeness
      // Remove the 'false' at your own risk
      window.navigator.msSaveBlob(blob, filename);

    } else if (window.Blob && window.URL) {
      // HTML5 Blob        
      var blob = new Blob([csv], {
        type: 'text/csv;charset=utf-8'
      });
      var csvUrl = URL.createObjectURL(blob);

      $(this)
        .attr({
          'download': filename,
          'href': csvUrl
        });
    } else {
      // Data URI
      var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

      $(this)
        .attr({
          'download': filename,
          'href': csvData,
          'target': '_blank'
        });
    }
  }

  // This must be a hyperlink
  $(".export").on('click', function(event) {
    // CSV
    var args = [$('#dvData>table'), 'export.csv'];

    exportTableToCSV.apply(this, args);

    // If CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
  });
});
a.export,
a.export:visited {
  display: inline-block;
  text-decoration: none;
  color: #000;
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="export">Export Table data into Excel</a>
<div id="dvData">
  <table>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
      <th>Column Three</th>
    </tr>
    <tr>
      <td>row1 Col1</td>
      <td>row1 Col2</td>
      <td>row1 Col3</td>
    </tr>
    <tr>
      <td>row2 Col1</td>
      <td>row2 Col2</td>
      <td>row2 Col3</td>
    </tr>
    <tr>
      <td>row3 Col1</td>
      <td>row3 Col2</td>
      <td>row3 Col3</td>
    </tr>
    <tr>
      <td>row4 'Col1'</td>
      <td>row4 'Col2'</td>
      <td>row4 'Col3'</td>
    </tr>
    <tr>
      <td>row5 &quot;Col1&quot;</td>
      <td>row5 &quot;Col2&quot;</td>
      <td>row5 &quot;Col3&quot;</td>
    </tr>
    <tr>
      <td>row6 "Col1"</td>
      <td>row6 "Col2"</td>
      <td>row6 "Col3"</td>
    </tr>
  </table>
</div>

Stan na rok 2017

Używa teraz HTML5 Blob i URL jako preferowanej metody z Data URI jako alternatywą.

W Internet Explorerze

Inne odpowiedzi sugerują window.navigator.msSaveBlob; jednak wiadomo, że awaria IE10/Windows 7 i IE11/Windows 10 . Wątpliwe jest, czy działa przy użyciu Microsoft Edge (zobacz Microsoft Edge issue ticket #10396033).

W przeciwieństwie do innych programów, które nie są dostępne na konsoli Microsoft, przeglądarka może się zawiesić.]}
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");

Cztery lata po mojej pierwszej odpowiedzi, nowe wersje IE obejmują IE10, IE11 i Edge. Wszystkie zawieszają się na funkcji wymyślonej przez Microsoft (slow clap).

Dodaj navigator.msSaveBlob wsparcie na własne ryzyko.


Od 2013

Zazwyczaj jest to wykonywane przy użyciu rozwiązania po stronie serwera, ale jest to moja próba rozwiązanie po stronie klienta. Po prostu dumping HTML jako Data URI nie zadziała, ale jest pomocnym krokiem. Więc:

  1. konwertuje zawartość tabeli na prawidłowy łańcuch w formacie CSV. (To jest ta łatwa część.)
  2. zmusić przeglądarkę, aby go pobrać. Podejście window.open nie działa w Firefoksie, więc użyłem <a href="{Data URI here}">.
  3. Przypisz domyślną nazwę pliku używając atrybutu <a> tagu download, który działa tylko w Firefoksie i Google Chrome. Ponieważ jest tylko atrybutem, degraduje z wdziękiem.

Uwagi

Zgodność

Testy przeglądarek obejmują:

  • Firefox 20+, Win/Mac ( Działa)
  • [[50]} Google Chrome 26+, Win / Mac (Działa )
  • Safari 6, Mac (Działa , ale nazwa pliku jest ignorowana)
  • IE 9+ (fails )

Kodowanie Treści

Plik CSV jest eksportowany poprawnie, ale po zaimportowaniu do programu Excel znak ü jest drukowany jako ä. Excel interpretuje wartość nieprawidłowo.

Wprowadź var csv = '\ufeff';, a następnie Excel 2013 + poprawnie interpretuje wartości.

Jeśli potrzebujesz zgodności z Excel 2007, Dodaj prefiksy UTF-8 przy każdej wartości danych. Zobacz też:

 110
Author: Terry Young,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-21 01:18:10

Nie jestem pewien, czy powyższy kod generujący CSV jest tak wielki, że wydaje się pomijać th komórki, a także nie pozwalać na przecinki w wartości. Oto Mój kod generujący CSV, który może być przydatny.

zakłada, że masz zmienną $table, która jest obiektem jQuery (np. var $table = $('#yourtable');)

$rows = $table.find('tr');

var csvData = "";

for(var i=0;i<$rows.length;i++){
                var $cells = $($rows[i]).children('th,td'); //header or content cells

                for(var y=0;y<$cells.length;y++){
                    if(y>0){
                      csvData += ",";
                    }
                    var txt = ($($cells[y]).text()).toString().trim();
                    if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0){
                        txt = "\"" + txt.replace(/\"/g, "\"\"") + "\"";
                    }
                    csvData += txt;
                }
                csvData += '\n';
 }
 7
Author: Action Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-24 13:31:13

Mały update dla@Terry Young odpowiedz, czyli dodaj obsługę IE 10 +

if (window.navigator.msSaveOrOpenBlob) {
  // IE 10+
  var blob = new Blob([decodeURIComponent(encodeURI(csvString))], {
    type: 'text/csv;charset=' + document.characterSet
  });
  window.navigator.msSaveBlob(blob, filename);
} else {
  // actual real browsers
  //Data URI
  csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvData);

    $(this).attr({
      'download': filename,
      'href': csvData,
      'target': '_blank'
    });
}
 2
Author: Dušan Maďar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-07 16:50:07

Co zrobić, jeśli masz swoje dane w formacie CSV i przekonwertujesz je do HTML w celu wyświetlenia na stronie internetowej? Możesz użyć http://code.google.com/p/js-tables / plugin. Sprawdź ten przykład http://code.google.com/p/js-tables/wiki/Table Ponieważ używasz już biblioteki jQuery, założyłem, że możesz dodać inne biblioteki narzędzi javascript.

Jeśli dane są w formacie CSV, powinieneś być w stanie użyć ogólnego typu MIME 'application/octetstream'. Wszystkie 3 typy mime ty wypróbowane są zależne od oprogramowania zainstalowanego na komputerze klienta.

 1
Author: Zlatin Zlatev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-23 14:14:05

Z tego, co rozumiem, masz swoje dane w tabeli i chcesz utworzyć plik CSV z tych danych. Masz jednak problem z utworzeniem pliku CSV.

Myślę o iteracji i przetworzeniu zawartości tabeli i wygenerowaniu ciągu znaków z przetwarzanych danych. Możesz sprawdzić Jak przekonwertować JSON do formatu CSV i zapisać w zmiennej dla przykładu. Używasz jQuery w swoim przykładzie tak, że nie będzie liczyć jako zewnętrzny plugin. Następnie, po prostu trzeba służyć wynikowy ciąg znaków za pomocą window.open i application/octetstream zgodnie z sugestią.

 1
Author: MervS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:06
 <a id="export" role='button'>
        Click Here To Download Below Report
    </a>
    <table id="testbed_results" style="table-layout:fixed">
        <thead>
            <tr width="100%" style="color:white" bgcolor="#3195A9" id="tblHeader">
                <th>Name</th>
                <th>Date</th>
                <th>Speed</th>
                <th>Column2</th>
                <th>Interface</th>
                <th>Interface2</th>
                <th>Sub</th>
                <th>COmpany result</th>
                <th>company2</th>
                <th>Gen</th>
            </tr>
        </thead>
        <tbody>
            <tr id="samplerow">
                <td>hello</td>
                <td>100</td>
                <td>200</td>
                <td>300</td>
                <td>html2svc</td>
                <td>ajax</td>
                <td>200</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>hello</td>
                <td>100</td>
                <td>200</td>
                <td>300</td>
                <td>html2svc</td>
                <td>ajax</td>
                <td>200</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

    $(document).ready(function () {
        Html2CSV('testbed_results', 'myfilename','export');
    });



    function Html2CSV(tableId, filename,alinkButtonId) {
        var array = [];
        var headers = [];
        var arrayItem = [];
        var csvData = new Array();
        $('#' + tableId + ' th').each(function (index, item) {
            headers[index] = '"' + $(item).html() + '"';
        });
        csvData.push(headers);
        $('#' + tableId + ' tr').has('td').each(function () {

            $('td', $(this)).each(function (index, item) {
                arrayItem[index] = '"' + $(item).html() + '"';
            });
            array.push(arrayItem);
            csvData.push(arrayItem);
        });




        var fileName = filename + '.csv';
        var buffer = csvData.join("\n");
        var blob = new Blob([buffer], {
            "type": "text/csv;charset=utf8;"
        });
        var link = document.getElementById(alinkButton);

        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            link.setAttribute("href", window.URL.createObjectURL(blob));
            link.setAttribute("download", fileName);
        }
        else if (navigator.msSaveBlob) { // IE 10+
            link.setAttribute("href", "#");
            link.addEventListener("click", function (event) {
                navigator.msSaveBlob(blob, fileName);
            }, false);
        }
        else {
            // it needs to implement server side export
            link.setAttribute("href", "http://www.example.com/export");
        }
    }

</script>
 1
Author: Shahid wali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-13 17:14:40