vue中后端做Excel导出功能返回数据流前端的处理操作

为了实现Vue中后端做Excel导出功能返回数据流前端的处理操作，我们需要在后端生成Excel文件，并将其返回给前端，前端再将返回的数据流进行处理，以生成Excel文件。具体的步骤如下所述：

1. 后端生成Excel文件

我们可以使用开源的Excel处理库，在后端生成Excel文件。例如，我们可以使用phpspreadsheet这个库来生成Excel文件。首先，需要安装phpspreadsheet：

composer require phpoffice/phpspreadsheet

接下来，我们可以按照如下代码，使用phpspreadsheet来生成Excel文件：

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
use PhpOffice\PhpSpreadsheet\IOFactory;

public function exportExcel(){
    // 创建一个Excel对象
    $spreadsheet = new Spreadsheet();
    // 设置列名称
    $spreadsheet->getActiveSheet()->setCellValue('A1', '姓名')
        ->setCellValue('B1', '年龄')
        ->setCellValue('C1', '地址');

    // 设置数据
    $spreadsheet->getActiveSheet()->setCellValue('A2', '张三')
        ->setCellValue('B2', 20)
        ->setCellValue('C2', '北京市');
    $spreadsheet->getActiveSheet()->setCellValue('A3', '李四')
        ->setCellValue('B3', 30)
        ->setCellValue('C3', '上海市');

    // 创建Excel写入器
    $writer = new Xlsx($spreadsheet);

    // 将Excel写入一个临时文件
    $temp_file = tempnam(sys_get_temp_dir(), 'excel');
    $writer->save($temp_file);

    // 读取Excel文件内容
    $content = file_get_contents($temp_file);
    // 删除临时文件
    unlink($temp_file);

    // 返回Excel内容
    return response($content, 200, [
        'Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'Content-Disposition' => 'attachment; filename=example.xlsx',
    ]);
}

如上代码，我们使用phpspreadsheet这个库来创建Excel对象，并设置Excel的列名称和数据，最后将Excel文件写入一个临时文件，并通过response函数返回Excel内容。在返回Excel文件时，需要设置Content-Type和Content-Disposition头部，使浏览器能够正确地响应下载请求。

1. 前端处理数据流

在Vue中，我们可以使用axios库来获取Excel数据流，并将其转换为Blob对象，然后使用file-saver库将Blob对象保存到本地文件中。例如：

import axios from 'axios';
import { saveAs } from 'file-saver';

export default {
  methods: {
    handleExportExcel() {
      axios.get('/exportExcel', { responseType: 'blob' })
        .then(response => {
          const contentType = response.headers['content-type'];
          // 如果返回的内容不是Excel文件
          if (contentType.indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') === -1) {
            this.$message.error('导出失败！返回文件类型不正确！');
            return;
          }

          // 将数据流转换为Blob对象
          const blob = new Blob([response.data], { type: contentType });

          // 将Blob对象保存到本地文件中
          saveAs(blob, 'example.xlsx');
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

如上代码，首先使用axios库来获取Excel文件的数据流。由于Excel文件是二进制格式的数据，我们需要设置axios的responseType为'blob'，表示将响应数据作为二进制流进行处理。通过判断响应的Content-Type头部来确定返回的数据是否为Excel文件。如果是Excel文件，则将其转换为Blob对象，并使用file-saver库将Blob对象保存到本地文件中。

以上就是Vue中后端做Excel导出功能返回数据流前端的处理操作的完整攻略。

以下是示例代码解释：

1. 后端生成Excel文件代码解释：

在这个例子中，我们使用phpspreadsheet这个库来创建Excel对象，并设置Excel的列名称和数据。需要注意的是，由于Excel文件是二进制文件，因此我们需要将其写入一个临时文件中，再读取该文件的内容，并将其返回给前端。在返回Excel文件时，需要设置Content-Type和Content-Disposition头部。Content-Type头部用来指定返回的文件类型，Content-Disposition头部用来指定文件名和是否作为附件下载。

1. 前端处理数据流代码解释：

在这个例子中，我们使用axios库来获取Excel文件的数据流，将响应数据作为二进制流进行处理。通过判断响应的Content-Type头部来确定返回的数据是否为Excel文件。如果是Excel文件，则将其转换为Blob对象，并使用file-saver库将Blob对象保存到本地文件中。需要注意的是，由于file-saver库依赖于File API，因此在使用该库前需要确保浏览器支持File API。