简单实现vue分段导出excel

大家都是小菜鸡

已于 2023-05-11 15:40:59 修改

阅读量566

点赞数

文章标签： vue.js excel 前端

于 2023-05-11 15:27:40 首次发布

本文链接：https://blog.csdn.net/m0_68330110/article/details/130623095

版权

该文介绍如何在Vue项目中利用xlsx和file-saver库实现大数据量的Excel文件导出。首先安装相关依赖，然后准备数据并分段处理，避免一次性生成大文件导致问题。接着，通过xlsx将数据转换为工作表并写入工作簿，最后使用file-saver下载生成的Excel文件。

摘要由CSDN通过智能技术生成

1. 安装相应的依赖：使用xlsx组件和file-saver组件实现Excel导出功能，可以使用npm包管理器进行安装

npm install --save xlsx file-saver

2. 准备数据：将需要导出的数据按照格式存储到一个数组中，并在Vue组件中定义一个data属性来存储这个数据。

3. 分段导出Excel：为了避免一次性导出的数据量过大导致程序崩溃，可以将导出数据根据固定大小进行分段，使用循环遍历的方式分别生成多个Excel文件，然后将多个Excel文件合并。

4. 生成Excel文件：使用xlsx组件提供的工具函数将数据转换成Excel文件

import XLSX from 'xlsx'
export const exportData = (data) => {
    let worksheet = XLSX.utils.json_to_sheet(data)
    let workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    let buf = XLSX.write(workbook, {type: 'buffer', bookType: 'xlsx'})
    return buf
}

5. 下载Excel文件：使用file-saver组件提供的工具函数将生成的Excel文件下载到本地

import { saveAs } from 'file-saver'
const blob = new Blob([buf], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
saveAs(blob, 'example.xlsx')

或者直接放到项目中简单的写法！！！

1. 安装依赖

npm install --save xlsx file-saver

2. 引入依赖包并定义相关变量

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

data() {
  return {
    exportData: [], // 需要导出的数据
    itemNumberPerPage: 100, // 每个Excel文件包含的数据条数
  }
}

3. 导出函数

methods: {
  exportExcel() {
    let totalData = this.exportData // 数据总量
    const page = Math.ceil(totalData.length / this.itemNumberPerPage)
    for(let i = 0; i < page ; i++) {
      const start = i * this.itemNumberPerPage;
      const end = (i + 1) * this.itemNumberPerPage;
      const data = totalData.slice(start, end)

      // 将数据转换成Excel文件
      const worksheet = XLSX.utils.json_to_sheet(data)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, `Sheet${i+1}`)
      const buf = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })

      // 下载Excel文件
      const blob = new Blob([buf], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
      saveAs(blob, `文件名_${i+1}.xlsx`)
    }
  },
}