1.XLSX
Official Github: github.com/SheetJS/she…
2. Install the XLSX
Note: Here we write a simple demo using pure native H5 without introducing any framework.
2.1 Build a simple directory structure
- XLSX root directory -- xlsxExport Encapsulates and exports the XLSX installation directory -- index.js Encapsulates and exports the XLSX -- index. HTML demonstrates how to use itCopy the code2.2 installation XLSX
Please refer to Github for the installation method. Here, use NPM to install the xlsxExport directory:
npm install xlsx
Copy the code3. Encapsulate and export Excel methods
Here is the code in xlsxExport/index.js:
/** * Save the HTML table as excel * @param {Object} opt * @returns */ /* opt Parameter examples: {sheets:[{table: Document. getElmentById('table1'), noExportClass: 'table1_noexport', name: 'table1',}, {table: Document. getElmentById('table2'), noExportClass: ['table2_noexport', 'left', 'right'], name: 'table2_noexport',}, {table: Document.getelmentbyid ('table3'),}], noExportClass:'noExportClass', fileName:'table2Excel ', } */ function table2Excel( opt = { sheets: [], // To export the sheet array mandatory array each item generates a sheet /* sheet structure: {table: Node, / / to export the table structure will pass name: string, / / the name of the sheet optional noExportClass: string | string []. / / not be exported class optional} * / noExportClass affects only the current table: "", / / not be exported class optional string takes effect for the entire table | string [] fileName: "", // file name optional no default current timestamp}) {if (! opt.sheets || ! opt.sheets.length || ! Array.isarray (opt.sheets)) {reject("opt.sheets parameter type error!" ); } const sheets = opt.sheets; const book = __createBook(); for (let i = 0; i < sheets.length; i++) { if (! Sheets [I].table) {console.error("opt.sheets parameter error!" ); return; } if (! Sheets [I] name) {sheets [I] [" name "] = ${I + 1} ` ` form; } if (! sheets[i].noExportClass) { sheets[i].noExportClass = []; } if ( sheets[i].noExportClass && typeof sheets[i].noExportClass === "string" ) { sheets[i].noExportClass = [sheets[i].noExportClass]; } if (! opt.noExportClass) { opt.noExportClass = []; } if (opt.noExportClass && typeof opt.noExportClass == "string") { opt.noExportClass = [opt.noExportClass]; } opt.noExportClass.forEach((className) => { sheets[i].noExportClass.push(className); }); // Remove dom sheets[I]. Table = __removeFromNodeByClass(sheets[I]. Table, sheets[I].noExPortClass); // Add sheet object __addSheets(book, __createSheetByTable(sheets[I].table), sheets[I].name); } __download(book, opt.fileName); } / / private > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > / * * * removed from the specified node specifies the name of the class of the dom * @ param {*} node * @param {*} classNames */ function __removeFromNodeByClass(node, classNames) { const target = node.cloneNode(true); Classnames. forEach((name) => {const removeDoms = Array.from(target.getElementsByClassName(name)); if (removeDoms.length) { removeDoms.forEach((item) => { item.remove(); }); }}); return target; } @param {*} table */ function __createSheetByTable(table) {return XLSX.utils.table_to_sheet(table); */ function __createBook() {return xlsx.utils.book_new (); } /** * add sheet * @param {*} Book * @param {*} sheet */ function __addSheets(Book, sheet, name) { XLSX.utils.book_append_sheet(book, sheet, name); } @param {*} book * @param {*} filename */ function __download(book, filename = "") {if (! filename) { filename = new Date().getTime() + ""; } filename += ".xlsx"; XLSX.writeFile(book, filename); }Copy the code4. Export the Excel presentation
Here is the code in index.html:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <title>Document</title> </head> <body> <table id="table1" border="1"> <thead> <tr> <td <span ><span class="test1"> <span class="test2"> <span class="test2"> </span> </tr> <tr> < TD > < td > header 2 < / td > < td > header 3 < / td > < / tr > < thead > < tbody > < tr > < td > data 1 < / td > < td > data 2 < / td > < td > data 3 < / td > < / tr > < / tbody > < / table > <table id="table2" border="1"> <thead> <tr> <td colspan="3"> table2 <span class="test1"> table 1 delete test1 </span ><span Class = "test2" > delete table 1 test 2 < / span > < / td > < / tr > < tr > < td > header a < / td > < td > header b < / td > < td > header c < / td > < / tr > < thead > < tbody > < tr > Data a < td > < / td > < td > data b < / td > < td > data c < / td > < / tr > < / tbody > < / table > < button id = "exportBtn" > export < / button > <! /xlsxExport/index.js --> <script -- xlsx.full.min.js src="./xlsxExport/node_modules/xlsx/dist/xlsx.full.min.js"></script> <! <script SRC ="./xlsxExport/index.js"></script> <script> document.getelementById ("exportBtn").onclick = () => {table2Excel({sheets: [{table: document.getelementById ("table1"), name: "noExportClass ", noExportClass: "Test1 ",}, {table: document.getElementById("table2"),},], fileName:" hello. noExportClass: "test2",}); }; </script> <script> </script> </body> </html>Copy the code