实现Vue3/Nuxt3 预览excel文件

1. 安装必要的库

   npm install xlsx

2. 创建一个组件来处理文件上传和解析：
   在src/components 目录下创建一个名为 ExcelPreview.vue 的文件

   如果excel文件是后台返回的一个链接，需要重新请求解析成ArrayBuffer，
   以下是nuxt3 示例：

   
   // 为了解决跨域问题，在server/api 下 创建一个请求api， downloadFileByProxy.ts
   import { defineEventHandler } from 'h3';
   
   export default defineEventHandler(async event => {
     const { filePath } =  getQuery(event);
     let matches = filePath?.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
     let domain = matches && matches[1]; 
     return proxyRequest(event,`https://${domain}/`, {
       fetch: ()=>fetch(filePath),
     })
   })

   在ExcelPreview.vue 文件中：

     async function getFile(path: string) {
       // download pdf from api to prevent CORS
       const { _data } = await $fetch.raw(`/api/downloadFileByProxy`, {
         method: 'get',
         params: {
           filePath: path,
         },
       });
       let blob = _data;
       let buffer = await blob?.arrayBuffer();
       return buffer;
     }
   
     const debounceRenderHandle = debounce(async () => {
       bufferCache.value = bufferCache.value || (await getFile(props.path)); // bufferCache这里是用来处理缓存，可以视具体情况加这个变量与否
       const data = new Uint8Array(bufferCache.value as ArrayBuffer);
       const workbook = XLSX.read(data, { type: 'array' });
       const firstSheetName = workbook.SheetNames[0];
       const worksheet = workbook.Sheets[firstSheetName];
       sheetData.value = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
     }, 500);