Vue3实现LuckSheet在线预览Excel表格
作者：晨曦
在前端开发中预览Excel文件是常见的需求之一,本文将介绍如何使用Vue.js框架以及两个优秀的Excel库——LuckyExcel和Luckysheet,来实现Excel文件在线预览功能,希望对大家有所帮助
LuckSheet和LuckyExcel
在前端开发中预览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.clientHeight
const contentHeight = totalHeight - 230
//渲染excel
const 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表格功能，为用户提供良好的数据展示和编辑体验。
以上就是Vue3实现LuckSheet在线预览Excel表格的详细内容，更多关于Vue3在线预览表格的资料请关注脚本之家其它相关文章！