VUE中使用 tableExport 匯出xlsx檔案

G燁榮發表於2020-06-08

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="\@" (設定匯出格式為文字,否則類似身份證的選項會導成科學計數)

相關文章