实现Vue3/Nuxt3 预览excel文件

  1. 安装必要的库

    复制代码
    npm install xlsx
  2. 创建一个组件来处理文件上传和解析
    src/components 目录下创建一个名为 ExcelPreview.vue 的文件

    javascript 复制代码
    <template>
    <div>
    <input type="file" @change="handleFileUpload" />
    <table v-if="sheetData.length">
    <thead><tr><th v-for="(header, index) in sheetData[0]" :key="index">{{ header }}</th></tr></thead>
    <tbody><tr v-for="(row, rowIndex) in sheetData.slice(1)" :key="rowIndex"><td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td></tr></tbody>
    </table>
    </div>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    import * as XLSX from 'xlsx';
    
    const sheetData = ref([]);
    
    const handleFileUpload = (event: Event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target?.result 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 });
        };
        reader.readAsArrayBuffer(file);
      }
    };
    </script>

    如果excel文件是后台返回的一个链接,需要重新请求解析成ArrayBuffer,

    以下是nuxt3 示例:

    javascript 复制代码
    // 为了解决跨域问题,在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 文件中:

    javascript 复制代码
      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);
相关推荐
余道各努力,千里自同风4 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
小钱c75 小时前
Python使用 pandas操作Excel文件并新增列数据
python·excel·pandas
Southern Wind5 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
前端拿破轮6 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git
Mintopia6 小时前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Shi_haoliu7 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
njsgcs7 小时前
json转excel python pd
python·json·excel·pd
RECRUITGUY7 小时前
Excel中将毫秒时间戳转换为标准时间格式
excel
SunkingYang10 小时前
详细介绍C++中捕获异常类型的方式有哪些,分别用于哪些情形,哪些异常捕获可用于通过OLE操作excel异常
c++·excel·mfc·异常捕获·comerror
aesthetician10 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim