在前端开发中预览Excel文件是常见的需求之一。本文将介绍如何使用Vue.js框架以及两个优秀的Excel库——LuckyExcel和Luckysheet，来实现Excel文件在线预览功能。
LuckSheet是一款基于Web的在线表格组件，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源结合Vue3可以实现数据的动态展示和编辑，为用户提供良好的用户体验。
准备工作首先，需要在Vue3项目中安装LuckSheet组件库，可以通过npm或yarn进行安装：
npm install luckysheet或者
yarn add luckysheet安装完成后，可以在Vue3项目中引入LuckSheet组件并进行配置。
【参考】Luckysheet官方文档
实现LuckSheet组件在Vue3项目中，可以创建一个LuckSheet组件来实现在线预览Excel表格的功能。在LuckSheet组件中，可以使用LuckSheet提供的API来加载和展示Excel表格数据，并且可以实现数据的编辑和保存功能。
<template> <div> <!-- excel表格容器 --> <a-card :bordered="false" :style="{ background: '#fff' }"> <div id="luckysheet" :style="{ margin: '0px', padding: '0px', width: '100%', height: contentHeight + 'px' }" /> </a-card> </div></template><script setup>import $script from 'scriptjs'import LuckyExcel from 'luckyexcel'import { nextTick } from 'vue'import { reactive } from 'vue'import { message } from 'ant-design-vue'//父组件传递参数const props = defineProps({ fileUrl: { type: String, default: '', }, fileName: { type: String, default: '', },})const state = reactive({ fileUrl: '', fileName: '',})//初始化加载onMounted(() => { //动态引入文件 $script(['/lib/luckysheet/plugins/js/plugin.js', '/lib/luckysheet/luckysheet.umd.js', '/lib/luckysheet/loadCss.js'], 'luckysheet') $script.ready('luckysheet', function () { const fileUrl = props.fileUrl ? props.fileUrl : '' const fileName = props.fileName ? props.fileName : '' state.fileUrl = fileUrl state.fileName = fileName if (fileUrl == null) { console.log('error') } else { // 加载文件内容 openExcel({ url: fileUrl, name: fileName }) } })})//监听重新渲染组件watch( () => props.fileUrl, () => { openExcel({ url: props.fileUrl, name: props.fileName }) })//动态计算高度const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeightconst contentHeight = totalHeight - 230//渲染excelconst openExcel = ({ url: url, name: name }) => { nextTick(() => { LuckyExcel.transformExcelToLuckyByUrl(url, name, (exportJson, luckysheetfile) => { if (exportJson.sheets == null || exportJson.sheets.length === 0) { message.warning('无法读取excel的内容') return } const firstData = [] const secondData = {} for (let i = 0; i < exportJson.sheets.length; i++) { firstData[i] = { name: exportJson.sheets[i].name, index: exportJson.sheets[i].index, order: exportJson.sheets[i].order, status: exportJson.sheets[i].status, config: exportJson.sheets[i].config, } firstData[i].config.row = 10 parseInt(exportJson.sheets[i].status) === 1 ? (firstData[i].celldata = exportJson.sheets[i].celldata) : 0 == 0 secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata } // luckysheet生成网页excel window.luckysheet.destroy() window.luckysheet.create({ lang: 'zh', container: 'luckysheet', // 设定DOM容器的id showtoolbar: false, // 是否显示工具栏 showinfobar: false, // 是否显示顶部信息栏 showstatisticBar: true, // 是否显示底部计数栏 sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 allowEdit: false, // 是否允许前台编辑 enableAddRow: false, // 是否允许增加行 enableAddCol: false, // 是否允许增加列 sheetFormulaBar: false, // 是否显示公式栏 data: exportJson.sheets, //表格内容 enableAddBackTop: true, //返回顶部 title: exportJson.info.name, //表格标题 sheetRightClickConfig: { delete: false, // 删除 copy: false, // 复制 rename: false, //重命名 color: false, //更改颜色 hide: false, //隐藏，取消隐藏 move: false, //向左移，向右移 }, showsheetbarConfig: { add: false, }, devicePixelRatio: window.devicePixelRatio, //分辨率 defaultFontSize: 20, //默认字体大小 cellRightClickConfig: { copy: false, // 复制 copyAs: false, // 复制为 paste: false, // 粘贴 insertRow: false, // 插入行 insertColumn: false, // 插入列 deleteRow: false, // 删除选中行 deleteColumn: false, // 删除选中列 deleteCell: false, // 删除单元格 hideRow: false, // 隐藏选中行和显示选中行 hideColumn: false, // 隐藏选中列和显示选中列 rowHeight: false, // 行高 columnWidth: false, // 列宽 clear: false, // 清除内容 matrix: false, // 矩阵操作选区 sort: false, // 排序选区 filter: false, // 筛选选区 chart: false, // 图表生成 image: false, // 插入图片 link: false, // 插入链接 data: false, // 数据验证 cellFormat: false, // 设置单元格格式 }, }) }) })}</script>在LuckSheet组件中，通过引入Luckysheet库并动态加载样式文件，使用window.Luckysheet.create方法来创建LuckSheet实例，将Excel表格数据和配置选项传入实例中即可实现在线预览Excel表格的功能。
页面使用<template><div> <a-card :bordered="false" :loading="loading" :style="{ background: '#fff' }"> <lucksheetExcel :fileName="state.fileName" :fileUrl="state.fileUrl"></lucksheetExcel> </a-card></div></template><script lang="ts" setup>//导入组件import {lucksheetExcel } from 'xxxxxxx'//预览方式const token = 'Bearer ' + getToken()const fileUrlId = ref<string>('')const state = reactive({ fileUrl: `${import.meta.env.VITE_AXIOS_BASE_URL}/file/download/${fileUrlId.value}?Authorization=${token}`, fileName: '',})//预览方法const refreshTable = () => { // params请求参数 getLucksheetAPI(params).then((res) => { fileUrlId.value = res.data.fileId state.fileUrl = `${import.meta.env.VITE_AXIOS_BASE_URL}/file/download/${fileUrlId.value}?Authorization=${token}` }) .catch((err) => { console.log(err) })}onActivated(() => { refreshTable()})</script>实现效果
结语通过Vue3和LuckSheet的结合，可以实现方便快捷的在线预览Excel表格功能，为用户提供良好的数据展示和编辑体验。希望本文对你有所帮助！
作者：晨曦链接：https://juejin.cn/post/7303720074841522213
