当前位置:网站首页>将文件流转成file文件后使用luckysheet回显数据
将文件流转成file文件后使用luckysheet回显数据
2022-07-29 21:52:00 【ZMJ_QQ】
拿到接口返回的文件流数据,我需要将其转成file文件后,调用LuckExcel,然后在页面回显excel中的数据。因为自己太菜,搞了半天,忽然就实现了我想要的功能。因为不知道为啥成功了,所以还是老老实实把他们记下来。。。(主要是看第三点,其他都是简单的小东西,刚好闲着顺便也记个)
1、页面加载时默认获取上个月的excel数据
mounted() {
let now = new Date();
let year = now.getFullYear();
let premonth = now.getMonth();//now.getMonth()返回的是 0,1,2,...
let preDate;
if (premonth != 0) {
premonth = premonth < 10 ? '0' + premonth : premonth;
preDate = year + '-' + premonth;
} else {
year = parseInt(year) - 1;
preDate = year + '-' + '12';
}
this.$set(this.search, 'month', preDate)
this.getExcel()
},2、如果没有文件数据,给出提示

调用checkMonth接口,查询当前月是否有文件,如果返回值是false则给出错误提示;用aysnc await,要先直接checkMonth(),根据返回值再决定下一步执行什么。
async getExcel() {
if (this.search.month == "") {
this.$message.error("请先选择要查询的月份!")
return false;
}
this.loading = true;
let isExitRes = await checkMonth(this.search.month)
if (isExitRes.data) {
//加载文件数据并处理
} else {
this.$message.error("该月还未上传文件!")
}
},3、将该月的数据回显在页面

Luckysheet官方文档地址快速上手 | Luckysheet文档
Luckysheet的使用参考我写在另一个文里:https://blog.csdn.net/ZMJ_QQ/article/details/126014935
红框中主要是获取数据并转成file文件,但是有一个问题是文件名不知道如何获取到,现在是被我写死了,如果我找到了方法再来更新,要是有人知道的话给我留个方法


上图是我接收到的数据,下图是我转blob和file格式后的数据。
axios({
method: 'get',
url: process.env.VUE_APP_BASE_API + '/data-source-file/exportExcel/' + this.search.month,
responseType: 'arraybuffer',
}).then(res => {
const data = res.data
var blob = new Blob([data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
console.log("====blob====", blob)
const file = new window.File(
[blob], // blob
'Filename.xlsx',
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
);
console.log("====file====", file)
this.uploadExcel1(file)
})使用luckysheet 回显, window.luckysheet.create()中是一些配置信息
uploadExcel1(files) {
// In some cases, you need to use $nextTick
// this.$nextTick(() => {})
LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
console.log("transformExcelToLucky", files, exportJson)
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert("Failed to read the content of the excel file, currently does not support xls files!");
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 // 设置单元格格式
}
});
});
},边栏推荐
猜你喜欢
随机推荐
结合布林线理解现货白银走势图的方法
GBASE 8s 数据库的智能大对象备份
专利说明书怎么写?
华为畅享50 Pro评测:HarmonyOS加持 更流畅更安全
linux install redis using script
linux使用脚本安装redis
Sorry, it's hard for you to earn middle-aged money
【R语言】【2】绘图base和lattice和ggplot2库
JS教程之 ElectronJS 自定义标题栏
高等数学(第七版)同济大学 习题3-8 个人解答
leetcode122. Best Time to Buy and Sell Stock II 买卖股票的最佳时机 II(简单)
【luogu P8354】多边形(容斥)(NTT优化DP)
高等数学(第七版)同济大学 习题3-7 个人解答
新库上线 | CnOpenData国际货运代理信息数据
GBASE 8s自定义存储过程和函数介绍
【Verilog】Verilog设计进阶
三、HikariCP源码分析之获取连接流程三
八、HikariCP源码分析之ConcurrentBag一
Add a logo to the upper left corner of the picture, add time and address to the lower left corner, and wrap the line when the address reaches the specified length
GBASE 8s 数据库的备份创建









