导入excel表格显示进度条前后端代码，后端java，前端vue

以下是一个简单的后端Java代码示例，用于读取Excel数据并将其发送给前端Vue：

// 后端Java代码
@GetMapping("/excel")
public ResponseEntity<Resource> downloadExcel() throws IOException {
    // 读取Excel文件
    FileInputStream inputStream = new FileInputStream(new File("path/to/excel/file.xlsx"));
    Workbook workbook = new XSSFWorkbook(inputStream);
    Sheet sheet = workbook.getSheetAt(0);

    // 构造Excel数据
    List<List<String>> data = new ArrayList<>();
    for (int i = 0; i <= sheet.getLastRowNum(); i++) {
        Row row = sheet.getRow(i);
        List<String> rowData = new ArrayList<>();
        for (int j = 0; j <= row.getLastCellNum(); j++) {
            Cell cell = row.getCell(j);
            rowData.add(cell.toString());
        }
        data.add(rowData);
    }

    // 将Excel数据发送给前端
    HttpHeaders headers = new HttpHeaders();
    headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=excel.xlsx");
    ByteArrayResource resource = new ByteArrayResource(data.toString().getBytes());
    return ResponseEntity.ok()
            .headers(headers)
            .contentLength(resource.contentLength())
            .contentType(MediaType.parseMediaType("application/vnd.ms-excel"))
            .body(resource);
}

在前端Vue代码中，您可以使用Axios来调用后端Java接口并显示进度条。以下是一个简单的代码示例：

<!-- 前端Vue代码 -->
<template>
  <div>
    <button @click="downloadExcel">下载Excel文件</button>
    <div v-if="showProgressBar">
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      showProgressBar: false,
      progress: 0,
    };
  },
  methods: {
    downloadExcel() {
      this.showProgressBar = true;
      axios({
        method: 'get',
        url: '/excel',
        responseType: 'arraybuffer',
        onDownloadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      })
        .then((response) => {
          const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = 'excel.xlsx';
          link.click();
          this.showProgressBar = false;
          this.progress = 0;
        })
        .catch((error) => {
          console.error(error);
          this.showProgressBar = false;
          this.progress = 0;
        });
    },
  },
};
</script>

在此示例中，我们使用axios发送GET请求来下载Excel文件。我们还将`responseType`设置为`arraybuffer`，以便我们可以将Excel数据转换为Blob对象并将其作为文件下载。

为了显示进度条，我们使用`onDownloadProgress`回调函数来监视下载进度，并更新`progress`数据属性。我们还使用`Blob`对象和`URL.createObjectURL`方法创建一个链接，以便用户可以通过单击下载链接来下载Excel文件。

请注意，这只是一个简单的示例，您可以根据您的需求进行更改和扩展。