如何使用javascript导出excel文件格式的表单表

Question

以下是我的表

<display:table name="analyticBeans" id="user" export="true" style="width:750px" sort="list" requestURI="/generatePerformanceReport.htm">
     <display:caption><b>Assessment Name : ${assessment.assessmentName}</b></display:caption>
     <display:column property="id" title="Sr No." headerClass="sortable" class="srNo" />
     <display:column property="firstName" title="Name" headerClass="sortable" class="pgmkey" />
     <display:column property="markObtain" title="Marks Obtained" headerClass="sortable" class="pgmkey" />
     <display:column property="assessmentTotalMarks" title="Total Marks" headerClass="sortable" class="pgmkey" />
     <display:column property="subject" title="Subject" headerClass="sortable" class="pgmkey" />
     <display:setProperty name="export.pdf" value="true" />
     <display:setProperty name="export.pdf.filename" value="PerformanceReport.pdf" />
</display:table>
<input type="button" id="btnExport" onclick= "generateexcel()">Click for Save</input>

Answer 1

$("#btnExport").click(function(e) {
  let file = new Blob([$('#dvData').html()], {type:"application/vnd.ms-excel"});

let url = URL.createObjectURL(file);

let a = $("<a />", {
  href: url,
  download: "filename.xls"
})
.appendTo("body")
.get(0)
.click();
  e.preventDefault();
});

body {
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}
table {
    border: 1px solid black;
}
th {
    border: 1px solid black;
    padding: 5px;
    background-color:grey;
    color: white;
}
td {
    border: 1px solid black;
    padding: 5px;
}
input {
    font-size: 12pt;
    font-family: Calibri;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>
<div id="dvData">
    <table>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td>row3 Col3
            </td>
        </tr>
    </table>
</div>