vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Luckysheet实现Excel在线预览

Vue使用Luckysheet实现Excel文件在线预览的三种方案

作者：梅孔立

在企业后台管理系统中,Excel文件的在线预览是一个非常常见的需求,Luckysheet作为一款纯前端、类似Excel的在线表格库,配合 Luckyexcel 可以完美实现xlsx文件的解析和在线预览,本文将从三个维度完整讲解Luckysheet实现Excel预览的方案,需要的朋友可以参考下

一、前言

在企业后台管理系统中，Excel 文件的在线预览是一个非常常见的需求。相比下载到本地再用 Office 软件打开，在线预览能提供更好的用户体验。Luckysheet 作为一款纯前端、类似 Excel 的在线表格库，配合 Luckyexcel 可以完美实现 xlsx 文件的解析和在线预览。

本文将从三个维度完整讲解 Luckysheet 实现 Excel 预览的方案：

  1. 纯 HTML 方式：最轻量，适合快速原型或简单页面
  2. Vue3 组件方式：适合中大型项目，可复用
  3. 前后端分离方式：适合需要从后端获取 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 只读模式核心配置详解

配置项值作用
allowEditfalse全局禁止所有编辑操作
showtoolbarfalse隐藏顶部功能工具栏
showinfobarfalse隐藏文件信息栏
sheetFormulaBarfalse隐藏公式输入栏
enableAddRow / enableAddColfalse禁止增删行列
showsheetbarConfig.addfalse禁止新增工作表

四、方案二：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() 释放资源。

核心要点：

  1. 只读预览：allowEdit: false 是核心
  2. 数据解析：通过 LuckyExcel.transformExcelToLucky() 将 xlsx 转为 Luckysheet 数据格式
  3. 资源加载顺序：plugin.js → luckysheet.umd.js → luckyexcel.umd.js
  4. 容器参数：传 id 字符串，不是 DOM 对象

以上就是Vue使用Luckysheet实现Excel文件在线预览的三种方案的详细内容，更多关于Vue Luckysheet实现Excel在线预览的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文