拿到接口返回的文件流数据,我需要将其转成file文件后,调用LuckExcel,然后在页面回显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()
- },
调用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("该月还未上传文件!")
- }
-
- },
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 // 设置单元格格式
- }
- });
- });
- },