导入个Excel页面直接卡死,该如何解决

JavaScript是单线程的语言，也就是说同步代码都需要排队去执行，这样就会造成很多问题，就比如：数据量大的excel文件的导入导出，会造成整个页面出现“假卡死”的现象。
什么是“假卡死”呢？意思就是页面其实并没有卡死，但是用户做一些操作时，页面并没有及时给到反馈，这就会让用户觉得页面卡死了

解决方案

这个问题可以用 WebWorker 来解决，WebWorker 能开启一个子线程，来做一些我们需要让它做的事情，并把结果返回到主线程，这样就可以不阻塞主线程的代码执行了

WebWorker和setTimout区别

• 其实在单核电脑上，它两确实没啥区别，但是在多核电脑上，WebWorker 可以同时使用多个cpu来计算， 速度比 setTimeout快
• setTimeout 还是在主线程上执行，还是会占主线程的资源影响主线程的执行，但是 WebWorker 跟主线程是隔离开的

步骤

1.安装xlsx

pnpm i xlsx

2.WebWorker导入

<input @change="handleImport" type="file" />
<button type="button" @click="handleClick">按钮</button>

const handleImport = (ev: Event) => {
  const file = (ev.target as HTMLInputElement).files![0];
  const worker = new Worker(
    URL.createObjectURL(
      new Blob([
        `
        importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.4/xlsx.full.min.js');
        onmessage = function(e) {
          const fileData = e.data;
          const workbook = XLSX.read(fileData, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];
          const data = XLSX.utils.sheet_to_json(sheet, { header: 1 });
          postMessage(data);
        };
        `,
      ]),
    ),
  );

  // 使用FileReader读取文件内容
  const reader = new FileReader();

  reader.onload = function (e: any) {
    const data = new Uint8Array(e.target.result);
    worker.postMessage(data);
  };

  // 读取文件
  reader.readAsArrayBuffer(file);

  // 监听Web Worker返回的消息
  worker.onmessage = function (e) {
    console.log('解析完成', e.data);
    worker.terminate(); // 当任务完成后，终止Web Worker
  };
};

3.WebWorker解决导出

const handleExport = () => {
  const worker = new Worker(
    URL.createObjectURL(
      new Blob([
        `
        importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.4/xlsx.full.min.js');
        onmessage = function(e) {
          const data = e.data;
          const workbook = XLSX.utils.book_new();
          const sheetData = e.data
          const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
          XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
          const excelData = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
          postMessage(excelData, [excelData.buffer]);
        };
        `,
      ]),
    ),
  );

  worker.onmessage = function (e) {
    const excelData = e.data;

    // 创建 Blob 对象，用于保存 Excel 文件数据
    const blob = new Blob([excelData], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });

    // 创建下载链接并触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'export.xlsx';
    downloadLink.click();

    // 终止 Web Worker
    worker.terminate();
  };

  worker.postMessage([...你的数据]);
};