Bagaimana cara mengekspor tabel ke Excel dari halaman web [closed]


97

Bagaimana cara mengekspor tabel ke Excel dari halaman web. Saya ingin ekspor berisi semua format dan warna.


9
Cara termudah mungkin adalah mengekspor dokumen HTML, yang dapat dibuka oleh Excel.
Pekka

@Pekka Saya sudah mencobanya, ia kehilangan semua format / css / ukuran kolom dll
code511788465541441

3
@pengguna di mana Anda menyatakan ukuran kolom dan semacamnya? Saya tidak terlalu paham dengan mengekspor data ke Excel tetapi Anda mungkin perlu mendeklarasikannya secara inline, yaitu<td style="background-color: ...
Pekka

@user - setidaknya ada dua masalah berbeda di sini: 1) memformat data sehingga muncul dengan benar di Excel, dan 2) mengekspor data menggunakan Javascript sehingga menyetel jenis mime dengan benar, meminta pengguna untuk menyimpan file . Apakah Anda mencoba menyelesaikan kedua masalah ini?
nrabinowitz

10
Mengapa ini dianggap "berdasarkan opini"? Ini adalah pertanyaan teknis yang sangat mudah.
brandizzi

Jawaban:


75

Jauh dan jauh, ekspor terbersih dan termudah dari tabel ke Excel adalah plugin Jquery DataTables Table Tools. Anda mendapatkan kisi yang menyortir, memfilter, memesan, dan memberi halaman data Anda, dan hanya dengan beberapa baris kode tambahan dan dua file kecil yang disertakan, Anda dapat mengekspor ke Excel, PDF, CSV, ke papan klip, dan ke printer.

Ini semua kode yang diperlukan:

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

Jadi, cepat untuk diterapkan, tidak ada batasan browser, tidak diperlukan bahasa sisi server, dan yang terpenting sangat MUDAH untuk dipahami. Ini sama-sama menguntungkan. Namun, satu hal yang memiliki batasan adalah pemformatan kolom yang ketat.

Jika pemformatan dan warna adalah dealbreaker mutlak, satu-satunya metode lintas browser yang 100% andal yang saya temukan adalah menggunakan bahasa sisi server untuk memproses file Excel yang tepat dari kode Anda. Solusi pilihan saya adalah PHPExcel. Ini adalah satu-satunya yang saya temukan sejauh ini yang secara positif menangani ekspor dengan pemformatan ke versi MODERN dari Excel dari browser apa pun saat Anda tidak memberikan apa pun selain HTML. Biar saya jelaskan, ini pasti tidak semudah solusi pertama, dan juga sedikit memakan sumber daya. Namun, di sisi positifnya itu juga dapat menghasilkan langsung ke PDF juga. Dan, setelah Anda mengonfigurasinya, itu berfungsi, setiap saat.

PEMBARUAN - 15 September 2016: TableTools telah dihentikan untuk mendukung plugin baru yang disebut " tombol " Alat ini melakukan fungsi yang sama seperti ekstensi TableTools lama, tetapi JAUH lebih mudah untuk dipasang dan mereka menggunakan unduhan HTML5 untuk browser modern, dengan kemampuan untuk kembali ke unduhan Flash asli untuk browser yang tidak mendukung standar HTML5. Seperti yang Anda lihat dari banyak komentar sejak saya memposting tanggapan ini pada tahun 2011, kelemahan utama TableTools telah diatasi. Saya masih tidak dapat merekomendasikan DataTables cukup untuk menangani data dalam jumlah besar secara sederhana, baik untuk pengembang dan pengguna.


2
DataTables sepenuhnya Javascript. Hanya elemen TableTools yang menggunakan Flash, dan itu sangat kecil. Saya TIDAK AKAN PERNAH menggunakan Flash dengan sukarela di salah satu produk saya!
bpeterson76

16
Saya mengerti, dan saya setuju. Tapi tetap - betapapun kecilnya - ada objek .swf di sana, dan itu tidak dapat berjalan tanpa Flash.
magma

8
Solusi yang sangat bagus, tapi sayang sekali perlu Flash.
jnthnclrk

Halo dapatkah Anda menunjukkan contoh lengkap, saya terlalu noob untuk membuatnya bekerja tanpa contoh!
NoobTom

1
@PramodGaikwad, tidak, Tabel data akan menggantikan NG-tabel. Mereka secara efektif memiliki fungsi yang sama, tetapi Datatables JAUH lebih matang dan memiliki lebih banyak fitur. Ada spin-off Datatables yang dibuat khusus untuk Angular: l-lin.github.io/angular-datatables/#/welcome
bpeterson76

42

Dahulu kala, saya menemukan bahwa Excel akan membuka file HTML dengan tabel jika kita mengirimkannya dengan tipe konten Excel. Perhatikan dokumen di atas:

<!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>

Saya menjalankan bookmarklet berikut di atasnya:

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

dan sebenarnya saya mendapatkannya dapat diunduh sebagai file Excel. Namun , saya tidak mendapatkan hasil yang diharapkan - file dibuka di OpenOffice.org Writer. Itulah masalah saya: Saya tidak memiliki Excel di mesin ini jadi saya tidak dapat mencobanya lebih baik. Juga, trik ini bekerja kurang lebih enam tahun yang lalu dengan browser lama dan versi antik dari MS Office, jadi saya benar-benar tidak bisa mengatakan apakah itu akan berhasil hari ini.

Bagaimanapun, dalam dokumen di atas saya menambahkan tombol yang akan mengunduh seluruh dokumen sebagai file Excel, secara teori:

<!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>

Simpan dalam sebuah file dan klik tombolnya. Aku suka untuk mengetahui apakah itu bekerja atau tidak, jadi saya meminta Anda untuk berkomentar bahkan untuk mengatakan bahwa itu tidak bekerja.


11
Berhasil menambahkan pengganti pada akhirnya: window.open ('data: application / vnd.ms-excel,' + document.getElementById ('table'). OuterHTML.replace (/ / g, '% 20')) ;
VSP

6
Cara alternatif (disarankan): window.open ('data: application / vnd.ms-excel,' + encodeURIComponent (document.getElementById ('table'). OuterHTML));
VSP

5
Bekerja dengan sempurna di firefox, bungkus tabel Anda dalam div dan kemudian panggil id dengan document.getElementById('id').innerHTMLuntuk mengambil tabel secara selektif saja, jika tidak semua barang Anda akan diekspor ke spreadsheet. Tidak berfungsi di IE lama, cukup buka jendela baru dengan semua html di judulnya
Abraham Brookes

1
Solusi sederhana ini berfungsi dengan baik. Lihat pertanyaan duplikat ini agar dapat mengatur nama file, dan mengatur nama lembar kerja juga. Jenis solusi yang sama; stackoverflow.com/questions/17126453/…
Espen Schulstad

2
Ini tidak lagi berfungsi di Office 365 karena tindakan keamanan yang lebih ketat. File Excel haruslah dokumen Excel yang BENAR atau akan menimbulkan kesalahan saat membuka.
Phil

12

Dimungkinkan untuk menggunakan format XML Excel 2003 lama (sebelum OpenXML) untuk membuat string yang berisi XML yang Anda inginkan, kemudian di sisi klien Anda dapat menggunakan URI data untuk membuka file menggunakan tipe mime XSL, atau mengirim file ke klien menggunakan mimetype Excel "Jenis Konten: application / vnd.ms-excel" dari sisi server.

  1. Buka Excel dan buat lembar kerja dengan format dan warna yang Anda inginkan.
  2. Simpan buku kerja Excel sebagai "XML Spreadsheet 2003 (* .xml)"
  3. Buka file yang dihasilkan di editor teks seperti notepad dan salin nilainya menjadi string di aplikasi Anda
  4. Dengan asumsi Anda menggunakan pendekatan sisi klien dengan data uri, kode akan terlihat seperti ini:
    
    <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. Kemudian Anda dapat menggunakan penggantian string untuk membuat kumpulan baris yang akan disisipkan ke dalam templat lembar kerja Anda
    
    <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. Setelah Anda mengumpulkan informasi, buat string terakhir dan buka jendela baru menggunakan URI data

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

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

Perlu dicatat bahwa browser lama tidak mendukung skema URI data, jadi Anda mungkin perlu membuat sisi server file untuk browser yang tidak mendukungnya.

Anda mungkin juga perlu melakukan encoding base64 pada konten URI data, yang mungkin memerlukan library js , serta menambahkan string '; base64' setelah jenis mime di URI data.


Meskipun menyenangkan menggunakan OpenXML, solusi ini tidak akan berfungsi pada tabel dengan colspans atau rowpans tanpa banyak pekerjaan pada generator javascript
Eduardo Molteni

1
Terima kasih telah mengajari saya sesuatu daripada menyuruh saya menggunakan plugin, sangat kami hargai. Perlu disebutkan bahwa pendekatan ini masih berfungsi dengan baik hingga hari ini.
Benjamin Gruenbaum

Menarik, mencoba pendekatan ini. Saya baru saja mendapatkan seluruh <? 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: Tabel> nilai dengan string saya yang ditulis ke dalam satu sel, termasuk semua baris dalam satu sel. Apa yang saya lewatkan?
CromeX

6

Excel memiliki sedikit fitur yang disebut "Kueri web" yang memungkinkan Anda mengambil data dari hampir setiap halaman web tanpa pemrograman tambahan.

Kueri web pada dasarnya menjalankan permintaan HTTP langsung dari dalam Excel dan menyalin beberapa atau semua data yang diterima (dan secara opsional memformat) ke dalam lembar kerja.

Setelah Anda menentukan kueri web, Anda dapat menyegarkannya kapan saja bahkan tanpa meninggalkan excel. Jadi, Anda tidak perlu benar-benar "mengekspor" data dan menyimpannya ke file - Anda lebih suka menyegarkan data seperti dari database.

Anda bahkan dapat menggunakan parameter URL dengan meminta excel meminta Anda untuk kriteria filter tertentu dll ...

Namun kekurangan yang saya perhatikan sejauh ini adalah:

  • data yang dimuat secara dinamis tidak dapat diakses, karena Javascript tidak dijalankan
  • Panjang URL terbatas

Berikut adalah pertanyaan tentang cara membuat kueri web di Excel. Ini menautkan ke situs Bantuan Microsoft tentang Bagaimana-Untuk Mendapatkan data eksternal dari halaman Web


Ini tidak akan berfungsi jika url berada di belakang dinding login.
Achshar

Ini berfungsi dengan otentikasi dasar dan juga berbasis bentuk tetapi dengan yang terakhir Anda mungkin harus mengklik "edit kueri" untuk memasukkan kembali kredensial dan mendapatkan cookie baru dari waktu ke waktu
HAL 9000

5

Ini adalah php tetapi Anda mungkin bisa mengubahnya menjadi 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); ?>    

5

Pertama, saya tidak akan merekomendasikan mencoba mengekspor Html dan berharap agar contoh pengguna Excel mengambilnya. Pengalaman saya bahwa solusi ini penuh dengan masalah termasuk ketidaksesuaian dengan klien Macintosh dan memberikan kesalahan kepada pengguna bahwa file yang dimaksud bukanlah format yang ditentukan. Solusi yang paling anti peluru dan ramah pengguna adalah solusi sisi server tempat Anda menggunakan pustaka untuk membuat file Excel yang sebenarnya dan mengirimkannya kembali ke pengguna. Solusi terbaik berikutnya dan solusi yang lebih universal adalah dengan menggunakan format Open XML. Saya telah mengalami beberapa masalah kompatibilitas yang jarang terjadi dengan versi Excel yang lebih lama tetapi secara keseluruhan ini akan memberi Anda solusi yang akan berfungsi pada versi Excel apa pun termasuk Mac.

Buka XML


4

mozilla masih mendukung URI basis 64. Ini memungkinkan Anda untuk membuat konten biner secara dinamis menggunakan javascript:

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

jika file excel Anda tidak terlalu bagus (tidak ada diagram, rumus, macroses) Anda dapat menggali ke dalam format dan menulis byte untuk file Anda, kemudian menyandikannya dengan base64 dan dimasukkan ke dalam href

lihat https://developer.mozilla.org/en/data_URIs


2

Ini sebenarnya lebih sederhana daripada yang Anda pikirkan: "Cukup" salin tabel HTML (yaitu: Kode HTML untuk tabel) ke clipboard. Excel tahu bagaimana memecahkan kode tabel HTML; bahkan akan mencoba mempertahankan atributnya.

Bagian yang sulit adalah "salin tabel ke papan klip" karena tidak ada cara standar untuk mengakses papan klip dari JavaScript. Lihat posting blog ini: Mengakses Clipboard Sistem dengan JavaScript - A Holy Grail?

Sekarang yang Anda butuhkan hanyalah tabel sebagai HTML. Saya menyarankan jQuery dan metode html () .


2

Kode ini hanya untuk IE sehingga hanya berguna dalam situasi di mana Anda tahu semua pengguna Anda akan menggunakan IE (seperti, misalnya, di beberapa lingkungan perusahaan.)

<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>

Saya mencoba menggunakan kode ini itu memang membuka tabel di excel tetapi format yang tidak benar sepertinya hanya menyalin kode html ke dalam tabel. seperti ini: <TD class = "" bgColor = # ed9fff> SARTIN, DAN </TD> <TD class = "" bgColor = # ed9fff> BALAEZ, BARBARA </TD> Ada Saran?
Fahad

Itu karena dia menggunakan innerHTML. Elemen yang dia dapatkan adalah tabelnya, jadi haruslah outerHTML. Saya membuat pengeditan
user1566694

Saya mendapatkan kesalahan: "Server otomatisasi tidak dapat membuat objek" saat membuat ActiveXObject. Bagaimana cara memperbaikinya?
Nk SP

2

Asumsi:

  1. diberi url

  2. konversi harus dilakukan di sisi klien

  3. sistemnya adalah Windows, Mac dan linux

Solusi untuk Windows:

kode python yang membuka jendela ie dan memiliki akses ke sana: variabel theurl berisi url ('http: //')

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

Catatan: jika halaman tidak dapat diakses secara langsung, tetapi login, Anda perlu menangani ini dengan memasukkan data formulir dan meniru tindakan pengguna dengan python

inilah contohnya

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

dengan cara yang sama untuk pengambilan data dari halaman web. Misalkan elemen dengan id 'el1' berisi data. mengambil teks elemen ke variabel

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

kemudian ketika data dalam variabel python, Anda dapat membuka layar excel dengan cara yang sama menggunakan 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

Solusi untuk Mac:

hanya tipnya: gunakan AppleScript - ini memiliki API yang sederhana dan serupa dengan Win32com.client Dispatch

Solusi untuk Linux:

java.awt.Robot mungkin berfungsi untuk ini, ia memiliki klik, tekan tombol (tombol panas dapat digunakan), tetapi tidak ada API untuk Linux yang saya ketahui yang dapat bekerja sesederhana AppleScript


1

pencarian google sederhana muncul ini:

Jika data sebenarnya adalah halaman HTML dan BELUM dibuat oleh ASP, PHP, atau bahasa skrip lainnya, dan Anda menggunakan Internet Explorer 6, dan Anda telah menginstal Excel di komputer Anda, cukup klik kanan pada halaman dan lihat melalui menu. Anda akan melihat "Ekspor ke Microsoft Excel". Jika semua kondisi ini benar, klik pada item menu dan setelah beberapa petunjuk itu akan diimpor ke Excel.

jika Anda tidak dapat melakukannya, dia memberikan metode alternatif "seret dan lepas":

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



0

Ada dua cara praktis untuk melakukan ini secara otomatis sementara hanya satu solusi yang dapat digunakan di semua browser. Pertama-tama Anda harus menggunakan spesifikasi open xml untuk membuat lembar excel. Ada plugin gratis dari Microsoft yang membuat format ini juga tersedia untuk versi kantor yang lebih lama. Xml terbuka adalah standar sejak office 2007. Kedua cara tersebut jelas di sisi server atau sisi klien.

Penerapan sisi klien menggunakan standar baru CSS yang memungkinkan Anda menyimpan data, bukan hanya URL ke data. Ini adalah pendekatan yang bagus karena Anda tidak memerlukan panggilan server, hanya data dan beberapa javascript. Kelemahannya adalah bahwa microsoft tidak mendukung semua bagiannya di rilis IE (Saya tidak tahu tentang IE9) saat ini. Microsoft membatasi data menjadi gambar tetapi kami membutuhkan dokumen. Di firefox ini berfungsi dengan baik. Bagi saya, IE adalah titik pembunuhan.

Cara lainnya adalah dengan menggunakan implementasi di sisi server. Harus ada banyak implementasi XML terbuka untuk semua bahasa. Anda hanya perlu menggambar satu. Dalam kebanyakan kasus, ini akan menjadi cara termudah untuk memodifikasi Viewmodel untuk menghasilkan Dokumen tetapi yang pasti Anda dapat mengirim semua data dari Clientside kembali ke server dan melakukan hal yang sama.


Bisakah down-voter berkomentar apa alasan downvoting?
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, '');
   }
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.