VUE中使用 tableExport 导出xlsx文件

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="@" （设置导出格式为文本，否则类似身份证的选项会导成科学计数）

最后

以上就是粗心菠萝为你收集整理的VUE中使用 tableExport 导出xlsx文件的全部内容，希望文章能够帮你解决VUE中使用 tableExport 导出xlsx文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。