Vue使用Luckysheet实现Excel文件在线预览的三种方案
更新时间：2026年07月29日 08:58:26 作者：梅孔立
在企业后台管理系统中,Excel文件的在线预览是一个非常常见的需求,Luckysheet作为一款纯前端、类似Excel的在线表格库,配合 Luckyexcel 可以完美实现xlsx文件的解析和在线预览,本文将从三个维度完整讲解Luckysheet实现Excel预览的方案,需要的朋友可以参考下
一、前言
在企业后台管理系统中，Excel 文件的在线预览是一个非常常见的需求。相比下载到本地再用 Office 软件打开，在线预览能提供更好的用户体验。Luckysheet 作为一款纯前端、类似 Excel 的在线表格库，配合 Luckyexcel 可以完美实现 xlsx 文件的解析和在线预览。
本文将从三个维度完整讲解 Luckysheet 实现 Excel 预览的方案：
- 纯 HTML 方式：最轻量，适合快速原型或简单页面
- Vue3 组件方式：适合中大型项目，可复用
- 前后端分离方式：适合需要从后端获取 Excel 文件的场景
二、环境准备与核心依赖
2.1 CDN 引入（HTML方式）
在 HTML 的 <head> 中按顺序引入以下资源：
<!-- Luckysheet 样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <!-- Luckysheet 核心脚本（注意顺序） --> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script> <!-- Luckyexcel：用于解析 xlsx 文件 --> <script src="https://cdn.jsdelivr.net/npm/luckyexcel@latest/dist/luckyexcel.umd.js"></script>
注意：资源加载顺序至关重要，
plugin.js必须在luckysheet.umd.js之前加载。
2.2 npm 安装（Vue3方式）
# 安装核心库 npm install luckysheet luckyexcel --save # 如果需要导出功能，额外安装 npm install exceljs file-saver --save
三、方案一：纯 HTML 方式（最快上手）
3.1 完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Luckysheet Excel 在线预览</title>
<!-- CDN 引入依赖 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckyexcel@latest/dist/luckyexcel.umd.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; background: #f0f2f5; padding: 20px; }
.container { max-width: 1400px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden; }
.header { padding: 20px 30px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.header h1 { font-size: 22px; }
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; }
.upload-btn-wrapper input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.upload-btn { padding: 10px 24px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.5); border-radius: 6px; color: #fff; font-size: 14px; cursor: pointer; transition: all 0.3s; }
.upload-btn:hover { background: rgba(255,255,255,0.35); border-color: #fff; }
.file-info { color: rgba(255,255,255,0.95); font-size: 14px; background: rgba(255,255,255,0.15); padding: 8px 16px; border-radius: 6px; }
#container { width: 100%; height: 650px; background: #fff; }
.footer { padding: 12px 30px; background: #fafafa; border-top: 1px solid #e8e8e8; font-size: 13px; color: #999; text-align: center; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 Luckysheet 预览</h1>
<div style="display:flex;align-items:center;gap:15px;flex-wrap:wrap;">
<div class="upload-btn-wrapper">
<button class="upload-btn">📁 选择文件</button>
<input type="file" id="fileInput" accept=".xlsx,.xls" />
</div>
<span class="file-info" id="fileInfo">未选择文件</span>
</div>
</div>
<div id="container"></div>
<div class="footer">Powered by <a href="https://github.com/dream-num/Luckysheet" rel="external nofollow" target="_blank">Luckysheet</a></div>
</div>
<script>
(function() {
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
// 销毁旧实例
function destroySheet() {
if (window.luckysheet && window.luckysheet.destroy) {
try { window.luckysheet.destroy(); } catch(e) {}
}
}
function renderSheet(exportJson, fileName) {
if (!exportJson.sheets || exportJson.sheets.length === 0) {
alert('文件解析失败：没有有效的工作表');
return;
}
destroySheet();
window.luckysheet.create({
container: 'container',
data: exportJson.sheets,
title: fileName || exportJson.info?.name || '未命名',
lang: 'zh',
// ===== 只读预览核心配置 =====
allowEdit: false, // 禁止编辑
showtoolbar: false, // 隐藏工具栏
showinfobar: false, // 隐藏信息栏
sheetFormulaBar: false, // 隐藏公式栏
enableAddRow: false, // 禁止增加行
enableAddCol: false, // 禁止增加列
showstatisticBar: false, // 隐藏统计栏
showsheetbarConfig: {
add: false, // 禁止新增 Sheet
menu: false,
sheet: true
},
contextMenu: [{ text: '复制', onclick: function() {} }]
});
fileInfo.textContent = '📄 ' + fileName;
}
function handleFile(file) {
if (!file) return;
const ext = file.name.split('.').pop().toLowerCase();
if (!['xlsx', 'xls'].includes(ext)) {
alert('请上传 .xlsx 或 .xls 文件');
return;
}
fileInfo.textContent = '⏳ 正在解析 ' + file.name + '...';
window.LuckyExcel.transformExcelToLucky(
file,
function(exportJson) {
renderSheet(exportJson, file.name);
},
function(err) {
console.error('解析失败:', err);
alert('文件解析失败，请确认文件格式正确');
fileInfo.textContent = '❌ 解析失败';
}
);
}
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) handleFile(file);
this.value = '';
});
// 支持拖拽上传
document.querySelector('.container').addEventListener('drop', function(e) {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length > 0) handleFile(files[0]);
});
document.querySelector('.container').addEventListener('dragover', function(e) {
e.preventDefault();
});
console.log('✅ Luckysheet 预览示例已启动');
})();
</script>
</body>
</html>3.2 只读模式核心配置详解
| 配置项 | 值 | 作用 |
|---|---|---|
allowEdit | false | 全局禁止所有编辑操作 |
showtoolbar | false | 隐藏顶部功能工具栏 |
showinfobar | false | 隐藏文件信息栏 |
sheetFormulaBar | false | 隐藏公式输入栏 |
enableAddRow / enableAddCol | false | 禁止增删行列 |
showsheetbarConfig.add | false | 禁止新增工作表 |
四、方案二：Vue3 组件方式
4.1 在index.html中引入 CDN 资源
<!-- public/index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script> <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
4.2 创建ExcelPreview.vue组件
<template>
<div class="preview-wrapper">
<!-- 上传区域 -->
<div v-if="!hasData" class="upload-zone" @dragover.prevent @drop.prevent="handleDrop">
<div class="upload-content">
<div class="icon">📊</div>
<h3>点击或拖拽上传 Excel 文件</h3>
<p class="tip">支持 .xlsx、.xls 格式，仅预览不可编辑</p>
<button class="btn" @click="$refs.fileInput.click()">选择文件</button>
<input ref="fileInput" type="file" accept=".xlsx,.xls" style="display:none" @change="handleFileSelect" />
</div>
</div>
<!-- 工具栏 -->
<div v-else class="toolbar">
<span class="file-name">📄 {{ fileName }}</span>
<span class="sheet-count">{{ sheetCount }} 个工作表</span>
<button class="clear-btn" @click="handleClear">清空</button>
</div>
<!-- 表格容器 -->
<div ref="containerRef" class="sheet-container"></div>
</div>
</template>
<script setup>
import { ref, onBeforeUnmount, nextTick } from 'vue';
const props = defineProps({
height: { type: String, default: '600px' }
});
const emit = defineEmits(['loaded', 'error']);
const containerRef = ref(null);
const fileInput = ref(null);
const hasData = ref(false);
const fileName = ref('');
const sheetCount = ref(0);
let instance = null;
// 销毁表格
function destroySheet() {
if (instance) {
try { instance.destroy(); } catch (e) {}
instance = null;
}
if (window.luckysheet && window.luckysheet.destroy) {
try { window.luckysheet.destroy(); } catch (e) {}
}
}
// 渲染只读表格
function renderSheet(exportJson, name) {
if (!exportJson.sheets || exportJson.sheets.length === 0) {
emit('error', new Error('没有有效的工作表'));
return;
}
destroySheet();
nextTick(() => {
if (!containerRef.value) return;
instance = window.luckysheet.create({
container: containerRef.value,
data: exportJson.sheets,
title: name || '未命名',
lang: 'zh',
// 只读配置
allowEdit: false,
showtoolbar: false,
showinfobar: false,
sheetFormulaBar: false,
enableAddRow: false,
enableAddCol: false,
showstatisticBar: false,
showsheetbarConfig: { add: false, menu: false, sheet: true },
contextMenu: [{ text: '复制', onclick: () => {} }]
});
hasData.value = true;
fileName.value = name;
sheetCount.value = exportJson.sheets.length;
emit('loaded', { data: exportJson, name });
});
}
// 处理文件
function processFile(file) {
if (!file) return;
const ext = file.name.split('.').pop().toLowerCase();
if (!['xlsx', 'xls'].includes(ext)) {
emit('error', new Error('请上传 .xlsx 或 .xls 文件'));
return;
}
window.LuckyExcel.transformExcelToLucky(
file,
(exportJson) => renderSheet(exportJson, file.name),
(err) => {
console.error('解析失败:', err);
emit('error', new Error('文件解析失败: ' + err.message));
}
);
}
function handleFileSelect(e) {
const file = e.target.files[0];
if (file) processFile(file);
e.target.value = '';
}
function handleDrop(e) {
const files = e.dataTransfer.files;
if (files.length > 0) processFile(files[0]);
}
function handleClear() {
destroySheet();
hasData.value = false;
fileName.value = '';
sheetCount.value = 0;
if (containerRef.value) containerRef.value.innerHTML = '';
}
// 暴露方法
defineExpose({ renderSheet, handleClear, destroySheet, hasData });
onBeforeUnmount(() => {
destroySheet();
});
</script>
<style scoped>
.preview-wrapper { width: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.upload-zone { padding: 60px 20px; border: 2px dashed #d9d9d9; border-radius: 12px; margin: 20px; text-align: center; cursor: pointer; transition: all 0.3s; background: #fafafa; }
.upload-zone:hover { border-color: #667eea; background: #f0f2ff; }
.upload-content .icon { font-size: 48px; margin-bottom: 16px; }
.upload-content h3 { margin: 0 0 8px; font-size: 18px; color: #333; }
.upload-content .tip { margin: 0 0 20px; color: #999; font-size: 14px; }
.upload-content .btn { padding: 10px 32px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; transition: 0.3s; }
.upload-content .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
.toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #fafafa; border-bottom: 1px solid #e8e8e8; font-size: 14px; color: #333; flex-wrap: wrap; }
.clear-btn { margin-left: auto; padding: 4px 16px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; color: #555; transition: 0.2s; }
.clear-btn:hover { border-color: #ff4d4f; color: #ff4d4f; }
.sheet-container { width: 100%; height: v-bind(height); min-height: 400px; background: #fff; }
</style>4.3 在页面中使用
<template>
<div class="page">
<h1>Excel 在线预览</h1>
<ExcelPreview ref="previewRef" height="650px" @loaded="onLoaded" @error="onError" />
<div v-if="errorMsg" class="error">⚠️ {{ errorMsg }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import ExcelPreview from '@/components/ExcelPreview.vue';
const previewRef = ref(null);
const errorMsg = ref('');
function onLoaded(data) {
console.log('加载成功:', data);
errorMsg.value = '';
}
function onError(err) {
errorMsg.value = err.message;
console.error('预览错误:', err);
}
</script>
<style scoped>
.page { max-width: 1400px; margin: 0 auto; padding: 20px; }
.page h1 { font-size: 24px; margin-bottom: 20px; }
.error { margin-top: 16px; padding: 12px 16px; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 6px; color: #ff4d4f; }
</style>4.4 Vite 配置注意事项
如果遇到静态资源加载问题，在 vite.config.ts 中添加别名配置：
import { resolve } from 'path';
export default defineConfig({
resolve: {
alias: {
'luckysheet': resolve(__dirname, 'node_modules/luckysheet/dist')
}
}
});
五、方案三：前后端分离方式
5.1 后端：Node.js + Express
安装依赖
npm install express xlsx cors
后端代码 server.js
const express = require('express');
const xlsx = require('xlsx');
const cors = require('cors');
const path = require('path');
const app = express();
app.use(cors());
// 方式一：从服务器读取现有 Excel 文件并返回 JSON 数据
app.get('/api/excelData', (req, res) => {
try {
// 读取服务器上的 Excel 文件
const filePath = path.join(__dirname, 'files', 'example.xlsx');
const workbook = xlsx.readFile(filePath);
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = xlsx.utils.sheet_to_json(firstSheet, { header: 1 });
res.json({
success: true,
data: jsonData,
sheetName: workbook.SheetNames[0]
});
} catch (error) {
console.error('读取 Excel 失败:', error);
res.status(500).json({ success: false, error: error.message });
}
});
// 方式二：返回文件流让前端通过 Luckyexcel 解析
app.get('/api/excelFile', (req, res) => {
const filePath = path.join(__dirname, 'files', 'example.xlsx');
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader('Content-Disposition', 'inline; filename=example.xlsx');
res.sendFile(filePath);
});
app.listen(3000, () => {
console.log('🚀 服务器已启动: http://localhost:3000');
});
5.2 前端：Vue3 对接后端
<template>
<div>
<button @click="loadFromServer">从服务器加载 Excel</button>
<div id="luckysheet-container" style="width:100%;height:600px;"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import axios from 'axios';
// 方式一：后端返回 JSON 数据，直接渲染
async function loadFromServer() {
try {
const response = await axios.get('http://localhost:3000/api/excelData');
const { data: jsonData, sheetName } = response.data;
// 构造 Luckysheet 需要的数据格式
const exportJson = {
sheets: [{
name: sheetName || 'Sheet1',
data: jsonData
}],
info: { name: '服务器文件' }
};
// 渲染
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet-container',
data: exportJson.sheets,
title: '服务器文件',
allowEdit: false,
showtoolbar: false,
showinfobar: false
});
} catch (error) {
console.error('加载失败:', error);
}
}
// 方式二：后端返回文件流，通过 Luckyexcel 解析
async function loadFromServerAsFile() {
try {
const response = await axios.get('http://localhost:3000/api/excelFile', {
responseType: 'blob'
});
const file = new File(
[response.data],
'example.xlsx',
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
);
window.LuckyExcel.transformExcelToLucky(file, (exportJson) => {
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet-container',
data: exportJson.sheets,
title: '服务器文件',
allowEdit: false,
showtoolbar: false,
showinfobar: false
});
});
} catch (error) {
console.error('加载失败:', error);
}
}
</script>
六、进阶：权限控制与只读模式深化
6.1 基于角色的权限控制
class PermissionController {
constructor(userRole) {
this.userRole = userRole; // 'admin' | 'editor' | 'viewer'
}
applyPermissions() {
const config = {
admin: { allowEdit: true },
editor: { allowEdit: true },
viewer: { allowEdit: false } // 预览用户强制只读
};
window.luckysheet.setConfig({
allowEdit: config[this.userRole].allowEdit
});
}
}
// 使用
const permCtrl = new PermissionController('viewer');
permCtrl.applyPermissions();
6.2 单元格级锁定
// 锁定特定单元格（设为只读）
function lockCell(row, col) {
window.luckysheet.setCellFormat(row, col, {
protected: true,
bg: '#f5f5f5'
});
}
// 批量锁定区域
function lockRange(startRow, startCol, endRow, endCol) {
for (let r = startRow; r <= endRow; r++) {
for (let c = startCol; c <= endCol; c++) {
lockCell(r, c);
}
}
}
七、常见问题与解决方案
7.1 CDN 资源加载失败
问题：jsdelivr.net 在国内可能访问不稳定。
解决：将资源下载到本地，在 index.html 中通过绝对路径引入。
7.2luckysheet.create报错
问题：提示 luckysheet is not defined。
解决：确认 CDN 资源加载顺序正确，且 plugin.js 在 luckysheet.umd.js 之前加载。在 Vue3 中可使用 window.luckysheet 调用。
7.3 容器container参数
注意：container 传入的是 DOM 元素的 id 字符串，不是 DOM 对象或选择器（#id）。
// ✅ 正确
luckysheet.create({ container: 'myContainer' })
// ❌ 错误
luckysheet.create({ container: '#myContainer' })
luckysheet.create({ container: document.getElementById('myContainer') })
7.4 组件销毁时内存泄漏
在组件卸载前调用 luckysheet.destroy() 释放资源。
核心要点：
- 只读预览：
allowEdit: false是核心 - 数据解析：通过
LuckyExcel.transformExcelToLucky()将 xlsx 转为 Luckysheet 数据格式 - 资源加载顺序：
plugin.js→luckysheet.umd.js→luckyexcel.umd.js - 容器参数：传
id字符串，不是 DOM 对象
以上就是Vue使用Luckysheet实现Excel文件在线预览的三种方案的详细内容，更多关于Vue Luckysheet实现Excel在线预览的资料请关注脚本之家其它相关文章！
相关文章
解决element-ui中下拉菜单子选项click事件不触发的问题
今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue监听浏览器原生返回按钮,进行路由转跳操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
实现shallowReadonly和isProxy功能示例详解
这篇文章主要为大家介绍了实现shallowReadonly和isProxy功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
iview table render集成switch开关的实例
下面小编就为大家分享一篇iview table render集成switch开关的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue用vis插件如何实现网络拓扑图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
为什么要在标题里加上一个业务数据的上报呢，因为在咱们前端项目中，可上报的数据维度太多，比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。2021-05-05
这篇文章主要介绍了vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
开发过程中我们会经常遇到一些复杂的页面,而这些页面大部分由一个个小部分组合起来的,而且不同页面中可能有些部分是一样的,所以我们通常会将这些部分封装成组件,在Vue中,我们可以使用components组件(模板)来实现,本文就来详细的说一说Vue3中的component组件2023-08-08
最新评论