前端开发 + Vue3.2/xlsx + 多格式文件预览组件（图片 / PDF/Excel）+ 企业级应用内文件在线查看

<template> <div class="excel-container-preview"> <div class="sheet-tabs"> <button v-for="(sheetName, index) in sheetNames" :key="index" :class="{ active: activeSheetIndex === index }" @click="activeSheetIndex = index" > {{ sheetName }} </button> </div> <div class="excel-preview-wrapper"> <div class="excel-preview" v-html="currentSheetHtml"></div> </div> </div> </template> <script setup> import * as XLSX from 'xlsx' const info = inject('info') const onPreviewError = inject('onPreviewError') const sheetNames = ref([]) const sheetHtmls = ref([]) const activeSheetIndex = ref(0) const loading = ref(true) const reset = () => { sheetNames.value = [] sheetHtmls.value = [] activeSheetIndex.value = 0 loading.value = true } const render = async () => { try { const { _blob } = info.value reset() const workbook = await readExcelFromBlob(_blob) processWorkbook(workbook) } catch (error) { onPreviewError(error) } finally { loading.value = false } } const readExcelFromBlob = (blob) => { return new Promise((resolve, reject) => { const fileReader = new FileReader() fileReader.onload = (e) => { try { const data = new Uint8Array(e.target.result) const workbook = XLSX.read(data, { type: 'array' }) resolve(workbook) } catch (error) { reject(error) } } fileReader.onerror = () => reject(new Error('文件读取失败')) fileReader.readAsArrayBuffer(blob) }) } const processWorkbook = (workbook) => { sheetNames.value = workbook.SheetNames sheetHtmls.value = sheetNames.value.map((sheetName) => { const worksheet = workbook.Sheets[sheetName] const filteredWorksheet = filterEmptyRows(worksheet) const html = XLSX.utils.sheet_to_html(filteredWorksheet, { editable: false, id: `excel-table-${sheetName}` }) return html.replace('<table', '<table class="excel-table"') }) } const filterEmptyRows = (worksheet) => { const jsonData = XLSX.utils .sheet_to_json(worksheet, { header: 1, raw: false }) .filter((row) => row.some((cell) => cell !== null && cell.toString().trim() !== '') ) if (jsonData.length === 0) return worksheet return XLSX.utils.aoa_to_sheet(jsonData) } const currentSheetHtml = computed( () => sheetHtmls.value[activeSheetIndex.value] || '' ) const resizeObserver = ref(null) onMounted(() => { render() resizeObserver.value = new ResizeObserver((entries) => { adjustTableWidth() }) window.addEventListener('resize', adjustTableWidth) }) const cleanup = () => { if (resizeObserver.value) { resizeObserver.value.disconnect() } window.removeEventListener('resize', adjustTableWidth) } const adjustTableWidth = () => { nextTick(() => { const table = document.querySelector('.excel-table') if (table) { const containerWidth = document.querySelector( '.excel-preview-wrapper' ).offsetWidth table.style.width = 'auto' const naturalTableWidth = table.offsetWidth if (naturalTableWidth > containerWidth) { table.style.width = '100%' } else { table.style.width = `${naturalTableWidth}px` } } }) } watch(activeSheetIndex, () => { nextTick(() => { adjustTableWidth() }) }) onUnmounted(cleanup) </script> <style lang="scss"> .excel-container-preview { max-width: 100%; overflow-y: auto; height: calc(100vh - 100px); .sheet-tabs { display: flex; gap: 5px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 5px; button { background-color: #f0f0f0; border: 1px solid #ddd; padding: 4px 20px; cursor: pointer; white-space: nowrap; &.active { background-color: #4a86e8; color: white; border-color: #4a86e8; } } } .excel-preview-wrapper { overflow-x: auto; max-width: 100%; } .excel-preview { min-width: 100%; } .excel-table { border-collapse: collapse; table-layout: auto; th, td { border: 1px solid #ddd; text-align: left; word-wrap: break-word; min-width: 150px; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; } tr:hover { background-color: #f5f5f5; } } .error-message { padding: 20px; text-align: center; font-size: 16px; color: #f44336; } } </style>