【开发实践】网页预览excel表格原版样式
一、需求分析
由于业务部门需要，在导出excel表格页面，不需要先下载，就可以直接在页面上预览该表格文件。
二、代码实现
使用Luckysheet实现：
什么是Luckysheet
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。Luckysheet官网：Luckysheet官方在线文档
引入cdn：
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<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>
【前后端数据处理】：
后端返回给前端的数据，需要时流数据：
/**
* 下载文件
*
* @param filePath 目标路径
* @param response 响应请求
*/
public static void downloadExcelFiles(String filePath, String fileName, HttpServletResponse response, boolean delete) {
try {
// 读到流中
File file = new File(filePath);
// 设置输出的格式
//设置中文文件名称
fileName = URLEncoder.encode(fileName, "UTF-8");
//浏览器默认服务器传过去的是html，不是excel文件
//设置响应类型:传输内容是流，并支持中文
response.setContentType("application/octet-stream;charset=UTF-8");
//设置响应头信息header，下载时以文件附件下载
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
// 循环取出流中的数据
if (file.exists()) {
InputStream inStream = new FileInputStream(filePath);
byte[] b = new byte[100];
int len;
while ((len = inStream.read(b)) > 0) {
response.getOutputStream().write(b, 0, len);
}
inStream.close();
if (delete) {
deleteDir(new File(filePath).getParentFile().getParentFile());
}
}
} catch (IOException e) {
e.printStackTrace();
}前端请求：
axios({
method: "post",
url: url,
responseType:'arraybuffer', //告诉服务器想到的响应格式
headers: {}
}).then(res => {
that.getShowData(res)
}).catch(function (error) {
$.Notification.autoHideNotify('error', 'top right', '错误提示', '抱歉，服务器错误！');
})
//方法
getShowData(res) {
const data = res.data
var blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
// console.log("====blob====", blob)
if (blob.size === 0) {
return alert("数据不存在！");
}
const file = new window.File(
[blob], // blob
'Filename.xlsx',
{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}
);
// console.log("====file====", file)
this.loadExcel(file)
$('#full-width-modal').modal('show');
},
//加载方法
loadExcel(files) {
LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
// console.log("transformExcelToLucky", files, exportJson)
if (exportJson.sheets === null || exportJson.sheets.length === 0) {
alert("读取excel文件内容失败，目前不支持xls文件!");
return;
}
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
showinfobar: false,
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator,
lang: 'zh', // 设定表格语言
showinfobar: false,//是否显示顶部信息栏
showtoolbar: false,//是否显示工具栏
// showsheetbar: false,//是否显示底部sheet页按钮
enableAddRow: false,//允许添加行
// 自定义配置底部sheet页按钮
showsheetbarConfig: {
add: false,
menu: false,
},
//自定义底部sheet页右击菜单
sheetRightClickConfig: {
delete: false, // 删除
copy: false, // 复制
rename: false, //重命名
color: false, //更改颜色
hide: false, //隐藏，取消隐藏
move: false, //向左移，向右移
},
//自定义单元格右键菜单
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 // 设置单元格格式
}
});
});
},【效果图】
如果文章对您有帮助的话，点赞支持一下吧！