xlsx将html table导出为excel表格

示例中已省略部分无关的代码。

一、安装xlsx

$ npm install xlsx --save

二、导出excel方法

将导出excel方法写在混入中，在每个需要的页面混入。

isShowTableColumn 控制不需要打印的列 (XLSX会根据拿到的table的dom来转换成excel，将isShowTableColumn设为false，临时将不需要展示的列从dom中删除)，打印前将isShowTableColumn设为false，等dom更新后（Vue.nextTick方法）再调用XLSX的方法，导出excel，同时把isShowTableColumn再次设为默认值true。

src/mixins/tableMixin.js

import XLSX from 'xlsx'

export default {
  data() {
    return {
      // 操作栏是否展示
      isShowTableColumn: true
    }
  },
  methods: {
    // 导出当前页为excel
    exportExcel() {
      // 隐藏操作栏
      this.isShowTableColumn = false
      let title = this.$route.meta.title
      // DOM 更新了
      this.$nextTick(() => {
        // 导出excel
        const workSheet = XLSX.utils.table_to_sheet(this.$refs.table.$el, {raw: true})
        const workBook = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(workBook, workSheet, title)
        XLSX.writeFile(workBook, `${title}.xlsx`)
        // 显示操作栏
        this.isShowTableColumn = true
      })
    },
  },

}

三、页面引用

table设置属性ref="table"，不需要打印的列设置属性v-if="isShowTableColumn"。

src/views/deliver/ShipOrder/index.vue

<template>
  <div class="shipOrder">
    <mytable>
      
      <!-- 工具栏左侧按钮 -->
      <div slot="left-buttons">

        <el-button type="primary" size="mini" @click="exportExcel">导出excel</el-button>

      </div>

      <!-- 表格 -->
      <div slot="tables">
        <el-table ref="table" :data="tableData" @sort-change="sortChange" @selection-change="selectionChange" border :height="getTableHeight" style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="warehouseCode"
            label="所属仓库"
            width="120"
            sortable>
          </el-table-column>
            ...
          <el-table-column
            v-if="isShowTableColumn"
            label="操作"
            fixed="right"
            :width="width">
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button type="text" icon="el-icon-edit" size="mini" @click="showEdit(scope.row)" :disabled="btnDisabled('edit')">修改</el-button>
              <!-- 取消 -->
              <el-button type="text" icon="el-icon-close" size="mini" @click="showCancel(scope.row)" :disabled="btnDisabled('cancel')">取消</el-button>
              <!-- 明细 -->
              <el-button type="text" icon="el-icon-document" size="mini" @click="showDetail(scope.row)" :disabled="btnDisabled('detail')">明细</el-button>
              <!-- 激活 -->
              <el-button type="text" size="mini" @click="showActive(scope.row)" :disabled="btnDisabled('active')">激活</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </mytable>

  </div>
</template>

<script>
import Mytable from '@/components/Mytable'
import tableMixin from '@/mixins/tableMixin'

export default {
  mixins: [tableMixin],
  components: {
    Mytable
  },
  name: 'ShipOrder',
  data() {
    return {

    }
  },
  methods: {
     
  }
}
</script>

<style lang="scss" scoped>

</style>

四、