-
安装必要的库
npm install xlsx
-
创建一个组件来处理文件上传和解析 :
在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
文件中:javascriptasync 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);
实现Vue3/Nuxt3 预览excel文件
Bessie2342024-11-01 9:16
相关推荐
小妖6661 小时前
Next.js 怎么使用 Chakra UI胡西风_foxww1 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析格调UI成品1 小时前
[特殊字符] 数据可视化结合 three.js:让 3D 呈现更精准,3 个优化经验谈初遇你时动了情2 小时前
JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理,react 实现原理汪子熙2 小时前
Angular 最新的 Signals 特性详解Spider_Man2 小时前
前端路由双雄传:Hash vs. History南方kenny2 小时前
CSS Grid 布局:从入门到精通,打造完美二维布局小泡芙丫2 小时前
从买房到代码:发布订阅模式的"房产中介"之旅企鹅吧2 小时前
前端导出 pdf 与 跑马灯效果 最佳实践南方kenny2 小时前
移动端适配的利器:lib-flexible 原理与实战