前端导出EXCEL表格#记录

junsens

于 2024-03-22 15:37:59 发布

阅读量116

点赞数 2

文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/junsens/article/details/136942495

版权

记录以下工作中用过的前端导出方法：

<el-button size="small" type="primary" @click="handleAddEditTable('获取export列表')"  :loading="buttoing">导出</el-button>

<a :href="downUrl" :download="(params.name || '') + params.time + '.xls'" ref="down_url"></a>

<div id="exportIdTable">
    <el-table :data="exportTableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
    ...
    ...
    ...
    </el-table>
</div>

import moment from 'moment'
export default {
  data(){
    return {
        downUrl: '',
        buttoing: false,
        exportTableData:[],
        params:{
           name:'xxxx表',//打印名称
           time:moment().format('YYYY-MM-DD'),
        },   
    }
  },
  methods:{
    handleAddEditTable(type, value) {
      switch(type) {
        case '获取export列表':
            ...//获取需要导出的数据
            this.buttoing = true
            setTimeout(() => {
               this.handleAddEditTable('导出')
            }, 500)
        break
        case '导出' :
            this.buttoing = true
            let linkName
            let worksheet = linkName ? linkName : 'sheet'
            let uri = 'data:application/vnd.ms-excel;base64,'
            let template = `
                <html xmlns:o="urn:schemas-microsoft-com:office:office" 
                 xmlns:x="urn:schemas-microsoft-com:office:excel" 
                 xmlns="http://www.w3.org/TR/REC-html40">
                 <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                 <x:Name>${worksheet}</x:Name>
                 <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                 </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                 </head><body>${document.getElementById('exportIdTable').innerHTML}</body></html>`
             let base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
             this.downUrl = uri + base64(template)
             setTimeout(() => {
                this.$refs['down_url'].click()
                this.buttoing = false
              }, 500)
        break
      }
    }
  }
}

以下是导出成功的样子：