Home > Developer > Web Develop
If a table is displayed on the page and you want to export the table as an Excel file, you can export the table directly using JavaScript's Blob and Object URL attributes if the request is not high. However, this is the feature that Excel can use to open HTML documents, so the exported table is actually an HTML document with an extension of. xls and cannot be. xlsx, otherwise Excel cannot open it. (There is a scenario for generating a real Excel file using JavaScript, which you'll look at later.) ）
Instance:
<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Table</title> <MetaCharSet= "Utf-8" /> <style> /*This style is used only for browser page effects, and Excel does not detach the table border, this style is not required*/Table{Border-collapse:collapse; } </style></Head><Body><!--set border= "1" to show table-border lines -<TableBorder= "1"> <!--The caption element can generate a table header whose cell column spans the number of columns in the table - <caption>Student score Table</caption> <TR> <!--you can use rowspan and colspan to merge cells - <throwspan= "2">Number</th> <throwspan= "2">School Number</th> <throwspan= "2">Name</th> <throwspan= "2">Gender</th> <throwspan= "2">Age</th> <thcolspan= "3">Results</th> </TR> <TR> <th>Chinese</th> <th>Mathematical</th> <th>English</th> </TR> <TR> <TD>1</TD> <TD>2016001</TD> <TD>Tom</TD> <TD>Man</TD> <TD>13</TD> <TD>85</TD> <TD>94</TD> <TD>77</TD> </TR> <TR> <TD>2</TD> <TD>2016002</TD> <TD>John doe</TD> <TD>Woman</TD> <TD>12</TD> <TD>96</TD> <TD>84</TD> <TD>89</TD> </TR></Table><a>Export table</a><Script> //Use the outerHTML property to get the entire TABLE element's HTML code (including the <table> tag), and then wrap it into a full HTML document, set CharSet to Urf-8 to prevent Chinese garbled varHTML= "" +document.getElementsByTagName ("Table")[0].outerhtml+ "</body>"; //instantiates a Blob object whose first argument is an array containing the contents of the file, and the second parameter is an object that contains the file type properties varblob= NewBlob ([HTML], {type:"Application/vnd.ms-excel" }); vara=document.getElementsByTagName ("a")[0]; //using the Url.createobjecturl () method to generate a blob URL for a elementA.href=Url.createobjecturl (BLOB); //set file name, currently only Chrome and Firefox support this propertyA.download= "Student scores table. xls";</Script></Body></HTML>
Page effect:
Click "Export Table":
Note: In Firefox, you need to put the created a element in the body, or you cannot download it.
JS to export the table on the page as an Excel file
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
