ฉันจะส่งออกตารางไปยัง Excel จากเว็บเพจได้อย่างไร ฉันต้องการให้การส่งออกมีการจัดรูปแบบและสีทั้งหมด
<td style="background-color: ...
ฉันจะส่งออกตารางไปยัง Excel จากเว็บเพจได้อย่างไร ฉันต้องการให้การส่งออกมีการจัดรูปแบบและสีทั้งหมด
<td style="background-color: ...
คำตอบ:
การส่งออกจากตารางไปยัง Excel ที่สะอาดและง่ายที่สุดคือJquery DataTables Table Tools plugin คุณจะได้เส้นตารางที่จัดเรียงตัวกรองคำสั่งและหน้าข้อมูลของคุณและด้วยโค้ดเพียงไม่กี่บรรทัดและไฟล์ขนาดเล็กสองไฟล์รวมอยู่ด้วยคุณจะส่งออกไปยัง Excel, PDF, CSV ไปยังคลิปบอร์ดและไปยังเครื่องพิมพ์ได้
นี่คือรหัสทั้งหมดที่จำเป็น:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
} );
ใช้งานได้รวดเร็วไม่มีข้อ จำกัด ของเบราว์เซอร์ไม่ต้องใช้ภาษาฝั่งเซิร์ฟเวอร์และที่สำคัญที่สุดคือเข้าใจง่าย เป็น win-win สิ่งหนึ่งที่มีข้อ จำกัด คือการจัดรูปแบบคอลัมน์ที่เข้มงวด
หากการจัดรูปแบบและสีเป็นตัวทำลายอย่างแท้จริงวิธีการข้ามเบราว์เซอร์ที่เชื่อถือได้ 100% เดียวที่ฉันพบคือการใช้ภาษาฝั่งเซิร์ฟเวอร์เพื่อประมวลผลไฟล์ Excel ที่เหมาะสมจากโค้ดของคุณ ทางออกที่ฉันเลือกคือPHPExcel มันเป็นวิธีเดียวที่ฉันพบจนถึงตอนนี้ที่จัดการการส่งออกในเชิงบวกด้วยการจัดรูปแบบเป็น Excel เวอร์ชัน MODERN จากเบราว์เซอร์ใด ๆ เมื่อคุณไม่ให้อะไรเลยนอกจาก HTML ให้ฉันชี้แจงว่ามันไม่ง่ายเหมือนวิธีแก้ปัญหาแรกอย่างแน่นอนและยังเป็นทรัพยากรเล็กน้อย อย่างไรก็ตามในด้านบวกก็ยังสามารถส่งออกโดยตรงไปยัง PDF ได้เช่นกัน และเมื่อคุณได้รับการกำหนดค่ามันก็ใช้งานได้ทุกครั้ง
อัปเดต - 15 กันยายน 2559: TableTools ถูกยกเลิกเนื่องจากปลั๊กอินใหม่ที่เรียกว่า " ปุ่ม " เครื่องมือเหล่านี้ทำหน้าที่เหมือนกับส่วนขยาย TableTools เก่า แต่ติดตั้งได้ง่ายกว่า FAR และใช้ประโยชน์จากการดาวน์โหลด HTML5 สำหรับเบราว์เซอร์สมัยใหม่ ด้วยความสามารถในการเปลี่ยนกลับเป็นการดาวน์โหลด Flash ดั้งเดิมสำหรับเบราว์เซอร์ที่ไม่รองรับมาตรฐาน HTML5 ดังที่คุณเห็นจากความคิดเห็นมากมายตั้งแต่ฉันโพสต์คำตอบนี้ในปี 2554 จุดอ่อนหลักของ TableTools ได้รับการแก้ไขแล้ว ฉันยังไม่สามารถแนะนำ DataTables ได้เพียงพอสำหรับการจัดการข้อมูลจำนวนมากทั้งสำหรับนักพัฒนาและผู้ใช้
เมื่อนานมาแล้วฉันพบว่า Excel จะเปิดไฟล์ HTML พร้อมตารางหากเราส่งด้วยประเภทเนื้อหาของ Excel พิจารณาเอกสารด้านบน:
<!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>
ฉันใช้ bookmarklet ต่อไปนี้:
javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);
และอันที่จริงฉันดาวน์โหลดได้เป็นไฟล์ Excel อย่างไรก็ตามฉันไม่ได้รับผลลัพธ์ที่คาดหวัง - ไฟล์เปิดอยู่ใน OpenOffice.org Writer นั่นคือปัญหาของฉัน: ฉันไม่มี Excel ในเครื่องนี้ดังนั้นฉันจึงไม่สามารถลองให้ดีขึ้นได้ นอกจากนี้เคล็ดลับนี้ใช้ได้ผลกับเบราว์เซอร์รุ่นเก่าและ MS Office รุ่นเก่ามากขึ้นหรือน้อยลงดังนั้นฉันจึงไม่สามารถพูดได้ว่าวันนี้จะใช้ได้หรือไม่
อย่างไรก็ตามในเอกสารด้านบนฉันได้เพิ่มปุ่มซึ่งจะดาวน์โหลดเอกสารทั้งหมดเป็นไฟล์ Excel ในทางทฤษฎี:
<!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>
บันทึกเป็นไฟล์และคลิกที่ปุ่ม ฉันชอบที่จะรู้ว่ามันได้ผลหรือไม่ฉันจึงขอให้คุณแสดงความคิดเห็นแม้จะบอกว่ามันไม่ได้ผลก็ตาม
document.getElementById('id').innerHTML
เพื่อเลือกเฉพาะตารางเท่านั้นมิฉะนั้นข้อมูลทั้งหมดของคุณจะถูกส่งออกไปยังสเปรดชีต ไม่ทำงานใน IE เก่าเพียงแค่เปิดหน้าต่างใหม่พร้อม html ทั้งหมดในชื่อ
เป็นไปได้ที่จะใช้รูปแบบ XML ของ Excel 2003เก่า(ก่อน OpenXML) เพื่อสร้างสตริงที่มี XML ที่คุณต้องการจากนั้นในฝั่งไคลเอ็นต์คุณสามารถใช้ URI ข้อมูลเพื่อเปิดไฟล์โดยใช้ประเภท mime XSL หรือส่งไฟล์ ไปยังไคลเอนต์โดยใช้ Excel mimetype "Content-Type: application / vnd.ms-excel" จากฝั่งเซิร์ฟเวอร์
<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>
เมื่อคุณรวบรวมข้อมูลได้แล้วให้สร้างสตริงสุดท้ายและเปิดหน้าต่างใหม่โดยใช้ URI ข้อมูล
<script type="text/javascript">
var worksheet = worksheet_template.replace('{{ROWS}}', row_data);
window.open('data:application/vnd.ms-excel,'+worksheet);
</script>
เป็นที่น่าสังเกตว่าเบราว์เซอร์รุ่นเก่าไม่รองรับโครงร่าง URI ข้อมูลดังนั้นคุณอาจต้องสร้างฝั่งเซิร์ฟเวอร์ไฟล์สำหรับเบราว์เซอร์ที่ไม่รองรับ
คุณอาจต้องทำการเข้ารหัส base64 กับเนื้อหา URI ของข้อมูลซึ่งอาจต้องใช้ไลบรารี jsรวมทั้งการเพิ่มสตริง '; base64' หลังจากประเภท mime ใน URI ข้อมูล
Excel มีคุณลักษณะที่รู้จักกันเล็กน้อยเรียกว่า "แบบสอบถามเว็บ" ซึ่งช่วยให้คุณสามารถดึงข้อมูลจากเกือบทุกหน้าเว็บโดยไม่ต้องเขียนโปรแกรมเพิ่มเติม
แบบสอบถามบนเว็บเรียกใช้คำขอ HTTP โดยตรงจากภายใน Excel และคัดลอกข้อมูลที่ได้รับบางส่วนหรือทั้งหมด (และจัดรูปแบบทางเลือก) ลงในแผ่นงาน
หลังจากกำหนดคิวรีเว็บแล้วคุณสามารถรีเฟรชได้ทุกเมื่อโดยไม่ต้องออกจาก excel ดังนั้นคุณจึงไม่จำเป็นต้อง "ส่งออก" ข้อมูลและบันทึกลงในไฟล์ - คุณต้องการรีเฟรชข้อมูลเช่นเดียวกับจากฐานข้อมูล
คุณยังสามารถใช้ประโยชน์จากพารามิเตอร์ URL ได้โดยให้ excel แจ้งให้คุณทราบถึงเกณฑ์การกรองบางอย่างเป็นต้น ...
อย่างไรก็ตามข้อเสียที่ฉันสังเกตเห็นคือ:
นี่คือคำถามเกี่ยวกับวิธีสร้างแบบสอบถามทางเว็บใน Excel ลิงก์ไปยังไซต์วิธีใช้ของ Microsoft เกี่ยวกับวิธีรับข้อมูลภายนอกจากเว็บเพจ
นี่เป็น php แต่คุณอาจเปลี่ยนเป็น 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); ?>
ก่อนอื่นฉันไม่แนะนำให้ลองส่งออก Html และหวังว่าอินสแตนซ์ Excel ของผู้ใช้จะหยิบขึ้นมา ประสบการณ์ของฉันที่โซลูชันนี้เต็มไปด้วยปัญหารวมถึงความเข้ากันไม่ได้กับไคลเอนต์ Macintosh และส่งข้อผิดพลาดไปยังผู้ใช้ว่าไฟล์ที่เป็นปัญหาไม่ใช่รูปแบบที่ระบุ โซลูชันที่ใช้งานง่ายและป้องกันสัญลักษณ์แสดงหัวข้อย่อยมากที่สุดคือฝั่งเซิร์ฟเวอร์ที่คุณใช้ไลบรารีเพื่อสร้างไฟล์ Excel จริงและส่งกลับไปยังผู้ใช้ ทางออกที่ดีที่สุดถัดไปและโซลูชันสากลเพิ่มเติมคือการใช้รูปแบบ Open XML ฉันพบปัญหาความเข้ากันได้ที่หายากบางอย่างกับ Excel เวอร์ชันเก่า แต่โดยรวมแล้วสิ่งนี้ควรให้วิธีแก้ปัญหาที่จะทำงานกับ Excel เวอร์ชันใดก็ได้รวมถึง Mac ด้วย
mozilla ยังคงรองรับ URI 64 ฐาน สิ่งนี้ช่วยให้คุณสามารถเขียนเนื้อหาไบนารีแบบไดนามิกโดยใช้จาวาสคริปต์:
<a href="data:application/vnd.ms-excel<base64 encoded binary excel content here>"> download xls</a>
หากไฟล์ excel ของคุณไม่แฟนซีมาก (ไม่มีไดอะแกรมสูตรมาโคร) คุณสามารถขุดลงในรูปแบบและเขียนไบต์สำหรับไฟล์ของคุณจากนั้นเข้ารหัสด้วย base64 และใส่ใน href
สิ่งนี้ง่ายกว่าที่คุณคิดจริงๆ: "เพียง" คัดลอกตาราง HTML (นั่นคือ: โค้ด HTML สำหรับตาราง) ลงในคลิปบอร์ด Excel รู้วิธีถอดรหัสตาราง HTML มันจะพยายามรักษาแอตทริบิวต์ด้วยซ้ำ
ส่วนที่ยากคือ "คัดลอกตารางลงในคลิปบอร์ด" เนื่องจากไม่มีวิธีมาตรฐานในการเข้าถึงคลิปบอร์ดจาก JavaScript ดูบล็อกโพสต์นี้: การเข้าถึงคลิปบอร์ดของระบบด้วย JavaScript - A Holy Grail?
ตอนนี้สิ่งที่คุณต้องมีคือตารางเป็น HTML ผมขอแนะนำให้ jQuery และHTML ()วิธีการ
รหัสนี้เป็น IE เท่านั้นดังนั้นจึงมีประโยชน์เฉพาะในสถานการณ์ที่คุณรู้ว่าผู้ใช้ทั้งหมดของคุณจะใช้ IE (เช่นในบางสภาพแวดล้อมขององค์กร)
<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>
สมมติฐาน:
URL ที่กำหนด
การแปลงต้องทำในฝั่งไคลเอ็นต์
ระบบ ได้แก่ Windows, Mac และ linux
โซลูชันสำหรับ Windows:
รหัส python ที่เปิดหน้าต่าง ie และเข้าถึงได้: ตัวแปร theurl มี url ('http: //')
ie = Dispatch("InternetExplorer.Application")
ie.Visible = 1
ie.Navigate(theurl)
หมายเหตุ: หากไม่สามารถเข้าถึงเพจได้โดยตรง แต่เข้าสู่ระบบคุณจะต้องจัดการสิ่งนี้โดยป้อนข้อมูลแบบฟอร์มและจำลองการกระทำของผู้ใช้ด้วย python
นี่คือตัวอย่าง
from win32com.client import Dispatch
ie.Document.all('username').value=usr
ie.Document.all('password').value=psw
ในลักษณะเดียวกันสำหรับการดึงข้อมูลจากหน้าเว็บ สมมติว่าองค์ประกอบที่มี id 'el1' มีข้อมูล ดึงข้อความองค์ประกอบไปยังตัวแปร
el1 = ie.Document.all('el1').value
จากนั้นเมื่อข้อมูลอยู่ในตัวแปร python คุณสามารถเปิดหน้าจอ excel ในลักษณะเดียวกันโดยใช้ 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
โซลูชันสำหรับ Mac:
เคล็ดลับเท่านั้น: ใช้ AppleScript - มี API ที่เรียบง่ายและคล้ายกันเช่น win32com.client Dispatch
โซลูชันสำหรับ Linux:
java.awt.Robot อาจทำงานได้เนื่องจากมีการคลิกการกดปุ่ม (สามารถใช้ปุ่มลัดได้) แต่ไม่มี API สำหรับ Linux ที่ฉันทราบว่าสามารถทำงานได้ง่ายเหมือน AppleScript
การค้นหาของ Google อย่างง่ายทำให้เกิดสิ่งนี้:
หากข้อมูลนั้นเป็นเพจ HTML จริง ๆ และไม่ได้ถูกสร้างขึ้นโดย ASP, PHP หรือภาษาสคริปต์อื่น ๆ และคุณกำลังใช้ Internet Explorer 6 และคุณได้ติดตั้ง Excel ไว้ในคอมพิวเตอร์ของคุณให้คลิกขวาที่หน้าและดู ผ่านเมนู คุณควรเห็น "ส่งออกไปยัง Microsoft Excel" หากเงื่อนไขเหล่านี้เป็นจริงให้คลิกที่รายการเมนูจากนั้นระบบจะนำเข้าสู่ Excel
หากคุณไม่สามารถทำได้เขาจะให้วิธี "ลากแล้วปล่อย" ทางเลือกอื่น:
มีสองวิธีในการดำเนินการโดยอัตโนมัติในขณะที่สามารถใช้โซลูชันเดียวในเบราว์เซอร์ทั้งหมด ก่อนอื่นคุณควรใช้ข้อกำหนด xml แบบเปิดเพื่อสร้างแผ่นงาน excel มีปลั๊กอินฟรีจาก Microsoft ซึ่งทำให้รูปแบบนี้พร้อมใช้งานสำหรับ Office เวอร์ชันเก่าด้วย xml แบบเปิดเป็นมาตรฐานตั้งแต่ office 2007 ทั้งสองวิธีนี้เห็นได้ชัดคือเซิร์ฟเวอร์หรือไคลเอนต์ไซด์
การใช้งานไคลเอนต์ใช้มาตรฐานใหม่ของ CSS ที่ช่วยให้คุณจัดเก็บข้อมูลแทนที่จะเป็นเพียง URL ไปยังข้อมูล นี่เป็นวิธีการที่ยอดเยี่ยมเพราะคุณไม่ต้องการการโทรจากเซิร์ฟเวอร์ใด ๆ เพียงแค่ข้อมูลและจาวาสคริปต์ ข้อเสียของการฆ่าคือ microsoft ไม่สนับสนุนทุกส่วนใน IE ปัจจุบัน (ฉันไม่รู้เกี่ยวกับ IE9) Microsoft จำกัด ข้อมูลให้เป็นรูปภาพ แต่เราต้องการเอกสาร ใน firefox ใช้งานได้ดีทีเดียว สำหรับฉัน IE คือจุดสังหาร
อีกวิธีหนึ่งคือการใช้งานเซิร์ฟเวอร์ ควรมีการใช้งาน XML แบบเปิดจำนวนมากสำหรับทุกภาษา คุณเพียงแค่ต้องสร้างกราฟ ในกรณีส่วนใหญ่จะเป็นวิธีที่ง่ายที่สุดในการปรับเปลี่ยน Viewmodel เพื่อให้ได้ผลลัพธ์ในเอกสาร แต่แน่นอนว่าคุณสามารถส่งข้อมูลทั้งหมดจาก Clientside กลับไปที่เซิร์ฟเวอร์และทำเช่นเดียวกันได้
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, '');
}