【VUE】前端导出excel-沉睡个人博客

【VUE】前端导出excel

13人已阅读时间：2024-04-19 19:38:14

## 使用

```language
<export-btn  title="数据晾晒" idBox="dagzqkfx"></export-btn>

<el-table v-loading="loading" :data="showList" @selection-change="handleSelectionChange" id="dagzqkfx"></el-table>
```

## 按钮组件

```language
<template>
  <el-button type="warning" icon="el-icon-download" size="mini" @click="exportExcel">导出</el-button>
</template>

export default {
  name: 'ExportBtn',
  props:{
    title:{
      type: String,
      default: () => new Date() + '',
    },
    idBox:{
      type: String,
      default: () => '',
    },
  },
  methods:{
    exportExcel () {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#' + this.idBox),
        xlsxParam
      )
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          this.title + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
  }
}
</script>

</style>

```

上一篇：【uniapp】uniapp多个video列表播放时候只播放一个

下一篇：没有了