How to export data to tables in HTML5 and Vue
Common demand scenarios, we do background management system often need to export the corresponding form, to achieve customer requirements, next from vUE project to introduce two ways to export EXCAL form. Without further ado, go directly to the code:
1. Export table written in original HTML:
<table v-for="(workerDays,index) in rawHtml.groupClockRecords" :key="(workerDays,index)" border="1" align="center" style="border-collapse:collapse;" class="creditrecord"> <caption align="top" style="font-weight: bold"> <br><br> {{rawHtml.projectName}} <br><br> </caption> <thead> <tr> <th colspan="15" rowspan="1" Align ="left"> < span style =" box-sizing: border-box; {{workerdays. groupName? workerDays.groupName:"-"}} < span > statistical cycle: {{dateRange [0]}} to {{dateRange [1]}} < / span > < / th > <! -- <th>{{rawHtml.dateStr}}</th> --> </tr> <tr> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center" style="width:60px;" ></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center" style="width:100px;" ></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center"></th> <th rowspan="1" colspan="1" align="center" style="width:80px;" ></th> <! - < th: colspan = "colspanNum" rowspan = "1" align = "center" > {{dateRange [0]}} to {{dateRange [1]}} < / th > -- > <! - < th: colspan = "colspanNum" rowspan = "1" > to < / th > -- > <! -- <th rowspan="1" colspan="1" align="center"></th> --> </tr> <! -- <tr> <th rowspan="1" align="center" v-for="(data,index) in tableTitle" :key="(data,index)">{{data.split('-')[2]}}</th> </tr> --> </thead> <tbody> <tr v-for="(data,indexX) in workerDays.workerDaysClockRecords" :key="(data,indexX)"> <td rowspan="1" colspan="1" align="center">{{indexX+1}}</td> <td rowspan="1" colspan="1" align="center"><span style="display:inline-block; width:70px;" >{{data.workerName? data.workerName:"-"}}</span></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <td rowspan="1" colspan="1" align="center"></td> <! -- <td rowspan="1" colspan="1" align="center" v-for="(day,indexY) in tableTitle" :key="(day,indexY)"> {{data.daysClockRecord ? (data.daysClockRecord[tableTitle[indexY]] ? data.daysClockRecord[tableTitle[indexY]].firstClockedTime : "-") : "-"}}<br/>{{data.daysClockRecord ? (data.daysClockRecord[tableTitle[indexY]] ? data.daysClockRecord[tableTitle[indexY]].lastClockedTime : "-") : "-"}} </td> --> </tr> </tbody> <tfoot> <tr> <td rowspan="2" colspan="15" style="line-height:25px; text-align:left;" ></td> </tr> <tr></tr> <tr> <td rowspan="1" colspan="15"></td> </tr> <! --<tr>--> <! --<td rowspan="1" :colspan="tableTitle.length+4" style="text-align: left"></td>--> <! --</tr>--> </tfoot> </table>Copy the codeIndividually customized tables like this can be exported directly using the following method, supporting multiple table exports
exportExcel () {
// Use the outerHTML property to get the HTML code for the entire table element (including the
tag) and wrap it into a complete HTML document. Set charset to URF-8 to prevent Chinese garbled characters
let tableHtml = document.getElementsByClassName("creditrecord");
var appendHtml = "";
for(var i=0; i<tableHtml.length; i++){ appendHtml+=tableHtml[i].outerHTML }let html = "<html><head><meta charset='utf-8' /></head><body>" + appendHtml + "</body></html>";
// Instantiate a Blob object whose constructor takes an array containing the contents of the file and an object containing the file type attribute as its second argument
let blob = new Blob([html], { type: "application/vnd.ms-excel" }); //application/octet-stream
// You can also create an A tag with js
let a = document.createElement('a');
// var a = document.getElementsByTagName("a")[0];
// Generate a BLOb URL for element A using the url.createObjecturl () method
a.href = URL.createObjectURL(blob);
// Set the file name
a.download = "Basic Employment Information Form ("+this.dateRange[0] +"To"+this.dateRange[1] +").xls"; //xlsxa.click(); }}Copy the code2. Table export of vue with elementUI:
1. Install dependencies first
npm install --save xlsx file-saver
Copy the code2. Import it into required components
import FileSaver from "file-saver"
import XLSX from "xlsx"
Copy the codeThe complete code below:
html
<template>
<div>
<! Export button -->
<div class="toexcel">
<el-button @click="exportExcel" type="primary" class="button" style="width:70px; position:absolute; top:0; right:30px">export</el-button>
</div>
<el-table
class="table"
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</div>
</template>
Copy the codejs
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [{
date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
}, {
date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
}, {
date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
}, {
date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}}; },methods: {
// Use to export the table
exportExcel() {
// Set the current date
let time = new Date(a);let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let name = year + "" + month + "" + day;
// console.log(name)
/* generate workbook object from table */
//. Table Which table to export
var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx".bookSST: true.type: "array"
});
try {
// name+'.xlsx' indicates the name of the exported Excel table
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
name + ".xlsx"
);
} catch (e) {
if (typeof console! = ="undefined") console.log(e, wbout);
}
returnwbout; }}}; </script>Copy the codeTwo export methods should satisfy most of your requirements.