Bagaimana cara mengekspor tabel ke Excel dari halaman web. Saya ingin ekspor berisi semua format dan warna.
<td style="background-color: ...
Bagaimana cara mengekspor tabel ke Excel dari halaman web. Saya ingin ekspor berisi semua format dan warna.
<td style="background-color: ...
Jawaban:
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.
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.
document.getElementById('id').innerHTML
untuk 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
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.
<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>
<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>
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.
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:
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 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); ?>
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.
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
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 () .
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>
Asumsi:
diberi url
konversi harus dilakukan di sisi klien
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
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":
Dan sekarang ada cara yang lebih baik.
OpenXML SDK untuk JavaScript.
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.
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, '');
}