当前位置:网站首页>将文件流转成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 // 设置单元格格式
}
});
});
},边栏推荐
猜你喜欢

一篇关于Web3.0如何走向安全时代的说明

网络通信编程基础,BIO,NIO

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

【板栗糖GIS】arcmap—如何在表格空值处进行批量求和

【LeetCode】36、有效的数独

给pdf添加已作废标识

【Verilog】Verilog设计进阶

Add obsolete flag to pdf

D. Rain(思维/线性代数/差分数组)

都有哪些查找和下载英文文献的方法?
随机推荐
毕业论文文献综述写作技巧,超级详细!
新手如何写专利?
【CVPR2022】A Unified Query-based Paradigm for Point Cloud Understanding
对不起,你很难赚到中年人的钱
【板栗糖GIS】arcmap—如何快捷替换属性表中的部分内容
leetcode 890. Find and Replace Pattern(查找和替换pattern)
bright day
网络通信编程基础,BIO,NIO
GBASE 8s 如何通过脚本获取bufwait等统计信息
三、HikariCP源码分析之获取连接流程三
JZ24 反转链表
install mysql using script
[BUG]memset和成员初始化的先后顺序
全系都更换带T四缸,安全、舒适一个不落
【板栗糖GIS】arcmap—标注太长,如何换行显示
OR59 字符串中找出连续最长的数字串
转:idea中language level设置
Xshell 7 prompts "To continue using this program, you must apply the latest update or use a new version"
【Verilog 设计】Verilog 实现偶数、奇数分频和任意小数分频
rtsp-simple-server + srs搭建流媒体服务器