Vue前端导出Excel表格

发布时间：2023-05-20

Vue前端导出Excel表格方法

在Vue中，要实现前端导出Excel表格的功能，我们可以使用js-xlsx这个库。在安装好该库后，我们可以使用以下代码实现导出Excel表格：

excelExport () {
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['姓名', '年龄', '性别', '国籍']
    const filterVal = ['name', 'age', 'sex', 'nation']
    const list = [{name: '小明', age: 18, sex: '男', nation: '中国'}, {name: '小红', age: 19, sex: '女', nation: '中国'}]
    const data = this.formatJson(filterVal, list)
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: '人员名单',
      autoWidth: true,
      bookType: 'xlsx'
    })
  })
},
formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

在上述代码中，我们使用了一个名为formatJson的函数将json数据转换成可以发送到后台接收的数据格式。这个函数的作用是把json数据中特定的字段提取出来形成一个二维数组。

Vue前端导出Excel表格小数点

当我们要导出的数据中有小数点时，我们可以通过修改SheetJS/js-xlsx库的源码实现对小数点的支持。在js-xlsx.js 文件中，在到处write_num时，加上如下代码：

IFmt._table[2] = '0.00';
numFmt[2] = '0.00'

这样就可以实现对导出数据中小数点的支持了。

Vue前端导出Excel表格可变表头

有时候我们需要导出的Excel表格的表头并不是固定的，而是根据前端用户输入的内容动态生成的。在Vue中，我们可以使用element-ui组件库中的<el-table>组件来实现这个功能。具体代码实现如下：

// 在template中
<el-table :data="tableData">
  <el-table-column v-for="column in columns" :key="column.name" :prop="column.name" :label="column.label"></el-table-column>
</el-table>
// 在script中
import XLSX from 'xlsx'
export default {
  data () {
    return {
      columns: [{name: 'name', label: '姓名'}, {name: 'age', label: '年龄'}, {name: 'sex', label: '性别'}, {name: 'nation', label: '国籍'}],
      tableData: [{name: '小明', age: 18, sex: '男', nation: '中国'}, {name: '小红', age: 19, sex: '女', nation: '中国'}]
    }
  },
  methods: {
    downloadExcel () {
      const tHeader = this.columns.map(col => col.label)
      const filterVal = this.columns.map(col => col.name)
      const data = this.formatJson(filterVal, this.tableData)
      const workbook = XLSX.utils.book_new()
      const sheet = XLSX.utils.aoa_to_sheet([tHeader].concat(data))
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')
      XLSX.writeFile(workbook, '人员名单.xlsx')
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}

Vue怎么导出Excel表格

在Vue中，我们可以使用js-xlsx这个库来实现导出Excel表格的功能。具体代码实现可参考Vue前端导出Excel表格方法一节。使用该方法，我们可以将我们需要导出的数据转成相应的json文件，然后再转成Excel格式。

Vue表格导出Excel

要将Vue中的表格导出成Excel表格，我们可以在Vue中使用element-ui组件库中的<el-table>组件来实现，然后再使用js-xlsx库将表格数据转成Excel表格即可。具体代码实现可参考Vue前端导出Excel表格可变表头一节。

Vue导出Excel完整代码

以下是Vue中使用js-xlsx库实现导出Excel表格的完整代码：

<template>
  <div>
    <el-button type="primary" @click="downloadExcel">导出Excel文件</el-button>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  methods: {
    downloadExcel () {
      const tHeader = ['姓名', '年龄', '性别', '国籍']
      const filterVal = ['name', 'age', 'sex', 'nation']
      const list = [{name: '小明', age: 18, sex: '男', nation: '中国'}, {name: '小红', age: 19, sex: '女', nation: '中国'}]
      const data = this.formatJson(filterVal, list)
      const workbook = XLSX.utils.book_new()
      const sheet = XLSX.utils.aoa_to_sheet([tHeader].concat(data))
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')
      XLSX.writeFile(workbook, '人员名单.xlsx')
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

Vue操作Excel文件

在Vue中，如果要实现操作Excel文件的功能，我们可以使用SheetJS/js-xlsx这个库，这个库支持读取、写入以及操作Excel文件。具体实现可参考以下代码：

// 读取Excel数据
readExcel (file) {
  const reader = new FileReader()
  reader.onload = e => {
    const data = e.target.result
    const workbook = XLSX.read(data, {type: 'binary'})
    const sheetName = workbook.SheetNames[0]
    const sheet = workbook.Sheets[sheetName]
    const jsonData = XLSX.utils.sheet_to_json(sheet)
  }
  reader.readAsBinaryString(file)
}
// 写入Excel数据
writeExcel (jsonData) {
  const tHeader = ['姓名', '年龄', '性别', '国籍']
  const filterVal = ['name', 'age', 'sex', 'nation']
  const data = this.formatJson(filterVal, jsonData)
  const workbook = XLSX.utils.book_new()
  const sheet = XLSX.utils.aoa_to_sheet([tHeader].concat(data))
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')
  XLSX.writeFile(workbook, '人员名单.xlsx')
}
// 更新Excel数据
updateExcel (jsonData, index) {
  const tHeader = ['姓名', '年龄', '性别', '国籍']
  const filterVal = ['name', 'age', 'sex', 'nation']
  const data = this.formatJson(filterVal, jsonData)
  const workbook = XLSX.utils.book_new()
  const sheet = XLSX.utils.aoa_to_sheet([tHeader].concat(data))
  const wsname = workbook.SheetNames[0]
  const worksheet = workbook.Sheets[wsname]
  XLSX.utils.sheet_add_json(worksheet, jsonData[index], {skipHeader: true, origin: 'A2'})
  XLSX.writeFile(workbook, '人员名单.xlsx')
}

Vue导入Excel并预览

在Vue中，如果要实现导入Excel文件并预览的功能，我们可以使用SheetJS/js-xlsx这个库。具体实现可参考以下代码：

<template>
  <div>
    <el-upload :before-upload="beforeUploadExcel">
      <el-button slot="trigger">上传Excel文件</el-button>
    </el-upload>
    <el-table :data="personList">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="国籍" prop="nation"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  data () {
    return {
      personList: []
    }
  },
  methods: {
    beforeUploadExcel (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, {type: 'binary'})
          const sheetName = workbook.SheetNames[0]
          const sheet = workbook.Sheets[sheetName]
          const jsonData = XLSX.utils.sheet_to_json(sheet)
          this.personList = jsonData
        }
        reader.readAsBinaryString(file)
        resolve()
      })
    }
  }
}
</script>

Vue下载Excel模板

在Vue中，如果要实现下载Excel模板的功能，我们可以如下实现：

<template>
  <div>
    <a href="#" @click="downloadExcelTemp">下载Excel模板</a>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  methods: {
    downloadExcelTemp () {
      const tHeader = ['姓名', '年龄', '性别', '国籍']
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.aoa_to_sheet([tHeader])
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      XLSX.writeFile(wb, '人员模板.xlsx')
    }
  }
}
</script>

Vue批量导入Excel

在Vue中，如果要实现批量导入Excel文件的功能，我们可以使用SheetJS/js-xlsx这个库。具体实现可参考以下代码：

<template>
  <div>
    <el-upload :before-upload="beforeUploadExcel">
      <el-button slot="trigger">上传Excel文件</el-button>
    </el-upload>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  methods: {
    beforeUploadExcel (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, {type: 'binary'})
          const sheetName = workbook.SheetNames[0]
          const sheet = workbook.Sheets[sheetName]
          const jsonData = XLSX.utils.sheet_to_json(sheet)
          // 批量导入Excel数据到服务器
          this.uploadBatchData(jsonData)
        }
        reader.readAsBinaryString(file)
        resolve()
      })
    },
    uploadBatchData (data) {
      // 实现批量导入Excel数据的代码
    }
  }
}
</script>
推荐文章