使用webworker实现多线程处理大量数据上传

使用webworker.js文件定义

// 导入 xlsx 库
importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js');

// 监听主线程发送的文件消息
onmessage = function(event) {
  const file = event.data;

  // 调用解析 Excel 文件的函数
  parseExcelFile(file);
};

// 解析 Excel 文件的函数
function parseExcelFile(file) {
  const reader = new FileReader();

  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    // 存储解析后的数据
    let parsedData = [];

    // 遍历工作表
    workbook.SheetNames.forEach(function(sheetName) {
      const worksheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      parsedData.push({ sheetName: sheetName, jsonData: jsonData });
    });

    // 向主线程发送解析后的数据
    postMessage(parsedData);
  };

  reader.readAsArrayBuffer(file);
}

在我们.vue文件中

<template>
  <div>
    <input
      type="file"
      @change="handleFileUpload"
      id="fileInput"
      accept=".xlsx, .xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    />
    <ul>
      <li v-for="(item, index) in importedData" :key="index">
        <strong>{{ item.sheetName }}</strong>:
        <ul>
          <li v-for="(row, rowIndex) in item.jsonData" :key="rowIndex">
            {{ row }}
          </li>
        </ul>
      </li>
    </ul>
    <hr />

    <button @click="downloadExcel">生成并下载</button>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";

const importedData = ref([]);

const handleFileUpload = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];

  if (!file) return;

  // 创建 Web Worker
  const worker = new Worker(new URL("./excelWorker.js", import.meta.url));

  // 向 Web Worker 发送消息（文件对象）
  worker.postMessage(file);

  // 监听 Web Worker 返回的消息
  worker.onmessage = (event) => {
    importedData.value = event.data;
    console.log("Imported data:", importedData.value);

    // 结束 Worker
    worker.terminate();
  };

  // 监听 Web Worker 报告的错误
  worker.onerror = (error) => {
    console.error("Worker error:", error);
  };
};

//请求的接口
const downloadExcel = async () => {
  try {
    const response = await axios.get("http://localhost:3000/generate-excel", {
      responseType: "blob", // 告诉 Axios 返回的是二进制数据
    });

    // 创建 Blob 对象
    const blob = new Blob([response.data], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    // 创建下载链接
    const url = URL.createObjectURL(blob);

    // 创建一个<a>元素并设置属性
    const link = document.createElement("a");
    link.href = url;
    link.download = "patients.xlsx"; // 下载文件名

    // 点击<a>元素进行下载
    link.click();

    // 清理 URL 对象
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error("下载出错:", error);
  }
};
</script>