1. 下载 tableExport.jquery.plugin 文件
2. 在VUE项目中安装jquery
3. 引入tableExport导出,代码如下
//首先写写一个table,表明要导出的字段
<table style="display:none;" data-tableexport-display="always" id="exporttable">
<thead>
<tr>
<th>姓名</th>
<th>身份证号</th>
<th>联系电话</th>
<th>预约时间</th>
<th>业务类型</th>
<th>业务内容</th>
<th>车辆类型</th>
<th>车牌号</th>
<th>体温</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="i in exportTableData" :key="i.orderBh">
<td>{{i.name}}</td>
<td data-tableexport-msonumberformat="\@">{{i.personCode}}</td>
<td>{{i.phone}}</td>
<td>{{i.appointmentTime}}</td>
<td>{{i.businessTypes}}</td>
<td>{{i.businessContent}}</td>
<td>{{i.vehicleType}}</td>
<td>{{i.vehicleNum}}</td>
<td>{{i.temperature}}</td>
<td>{{i.status}}</td>
</tr>
</tbody>
</table>
//导入库文件
import '@/assets/tableExport/FileSaver.min.js'
import '@/assets/tableExport/xlsx.core.min.js'
import '@/assets/tableExport/tableExport.min.js'
// js部分
this.exportTableData = res.data.record.rows
setTimeout(() => {
$('#exporttable').tableExport({
type:'excel',
fileName: new Date().getTime(),
escape:'true'
})
}, 160)
4. 遇到的问题
data-tableexport-msonumberformat="\@" (设置导出格式为文本,否则类似身份证的选项会导成科学计数)