突破瓶颈！Vue后端管理项目的Excel导入导出功能剖析

2023-12-30 20:45:56

前言

在Vue后端管理项目中，Excel导入导出功能是必不可少的。它可以极大地提高数据处理的效率，满足用户多样化的数据交互需求。然而，实现这一功能并非易事。您需要掌握必要的技术知识，并对Vue框架有一定的了解。

必要依赖项

在开始之前，您需要确保已经安装了以下依赖项：

Blob.js
expor2Excel.js
webpack

如果您尚未安装这些依赖项，请使用以下命令进行安装：

npm install blob-util expor2excel webpack --save

配置Webpack

在安装了必要依赖项之后，您需要修改webpack.base.conf.js文件以配置Webpack。在该文件的module.rules数组中，添加以下代码：

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
},
{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}

在项目中引入Excel功能

在src目录下创建一个excel文件夹，并将Blob.js和expor2Excel.js引入该文件夹中。

import Blob from './Blob.js'
import Export2Excel from './expor2Excel.js'

封装Excel导入导出方法

为了方便使用，您可以将Excel导入导出功能封装成方法。在工具js文件中，添加以下代码：

// Excel导入
function importExcel(file) {
  let reader = new FileReader()
  reader.onload = function() {
    let data = reader.result
    let workbook = XLSX.read(data, {
      type: 'binary'
    })
    let sheetNames = workbook.SheetNames
    let sheet = workbook.Sheets[sheetNames[0]]
    let dataArray = XLSX.utils.sheet_to_json(sheet)
    return dataArray
  }
  reader.readAsBinaryString(file)
}

// Excel导出
function exportExcel(fileName, data) {
  let wb = XLSX.utils.book_new()
  let ws = XLSX.utils.json_to_sheet(data)
  XLSX.utils.book_append_sheet(wb, ws, fileName)
  XLSX.writeFile(wb, fileName + '.xlsx')
}

在组件中使用Excel功能

在需要使用Excel功能的组件中，您可以通过以下方式调用封装好的方法：

import { importExcel, exportExcel } from '../utils/excel'

export default {
  methods: {
    importExcel() {
      let file = this.$refs.fileInput.files[0]
      if (!file) {
        this.$message.error('请选择文件')
        return
      }
      let dataArray = importExcel(file)
      this.tableData = dataArray
    },
    exportExcel() {
      let fileName = '数据导出'
      exportExcel(fileName, this.tableData)
    }
  }
}