Vue前端導出Excel表格

一、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`組件庫中的“組件來實現這個功能。具體代碼實現如下：

// 在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`組件庫中的“組件來實現，然後再使用`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>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/257845.html