• 将文件流转成file文件后使用luckysheet回显数据


            拿到接口返回的文件流数据,我需要将其转成file文件后,调用LuckExcel,然后在页面回显excel中的数据。因为自己太菜,搞了半天,忽然就实现了我想要的功能。因为不知道为啥成功了,所以还是老老实实把他们记下来。。。(主要是看第三点,其他都是简单的小东西,刚好闲着顺便也记个)

    1、页面加载时默认获取上个月的excel数据

    1. mounted() {
    2. let now = new Date();
    3. let year = now.getFullYear();
    4. let premonth = now.getMonth();//now.getMonth()返回的是 0,1,2,...
    5. let preDate;
    6. if (premonth != 0) {
    7. premonth = premonth < 10 ? '0' + premonth : premonth;
    8. preDate = year + '-' + premonth;
    9. } else {
    10. year = parseInt(year) - 1;
    11. preDate = year + '-' + '12';
    12. }
    13. this.$set(this.search, 'month', preDate)
    14. this.getExcel()
    15. },

    2、如果没有文件数据,给出提示

     调用checkMonth接口,查询当前月是否有文件,如果返回值是false则给出错误提示;用aysnc await,要先直接checkMonth(),根据返回值再决定下一步执行什么。

    1. async getExcel() {
    2. if (this.search.month == "") {
    3. this.$message.error("请先选择要查询的月份!")
    4. return false;
    5. }
    6. this.loading = true;
    7. let isExitRes = await checkMonth(this.search.month)
    8. if (isExitRes.data) {
    9. //加载文件数据并处理
    10. } else {
    11. this.$message.error("该月还未上传文件!")
    12. }
    13. },

    3、将该月的数据回显在页面

     Luckysheet官方文档地址快速上手 | Luckysheet文档

    Luckysheet的使用参考我写在另一个文里:https://blog.csdn.net/ZMJ_QQ/article/details/126014935

    红框中主要是获取数据并转成file文件,但是有一个问题是文件名不知道如何获取到,现在是被我写死了,如果我找到了方法再来更新,要是有人知道的话给我留个方法

     ​​​​​​上图是我接收到的数据,下图是我转blob和file格式后的数据。

    1. axios({
    2. method: 'get',
    3. url: process.env.VUE_APP_BASE_API + '/data-source-file/exportExcel/' + this.search.month,
    4. responseType: 'arraybuffer',
    5. }).then(res => {
    6. const data = res.data
    7. var blob = new Blob([data], {
    8. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    9. });
    10. console.log("====blob====", blob)
    11. const file = new window.File(
    12. [blob], // blob
    13. 'Filename.xlsx',
    14. { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
    15. );
    16. console.log("====file====", file)
    17. this.uploadExcel1(file)
    18. })

    使用luckysheet 回显, window.luckysheet.create()中是一些配置信息

    1. uploadExcel1(files) {
    2. // In some cases, you need to use $nextTick
    3. // this.$nextTick(() => {})
    4. LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
    5. console.log("transformExcelToLucky", files, exportJson)
    6. if (exportJson.sheets == null || exportJson.sheets.length == 0) {
    7. alert("Failed to read the content of the excel file, currently does not support xls files!");
    8. return;
    9. }
    10. window.luckysheet.destroy();
    11. window.luckysheet.create({
    12. container: 'luckysheet', //luckysheet is the container id
    13. showinfobar: false,
    14. data: exportJson.sheets,
    15. title: exportJson.info.name,
    16. userInfo: exportJson.info.name.creator,
    17. lang: 'zh', // 设定表格语言
    18. showinfobar: false,//是否显示顶部信息栏
    19. showtoolbar: false,//是否显示工具栏
    20. // showsheetbar: false,//是否显示底部sheet页按钮
    21. enableAddRow: false,//允许添加行
    22. // 自定义配置底部sheet页按钮
    23. showsheetbarConfig: {
    24. add: false,
    25. menu: false,
    26. },
    27. //自定义底部sheet页右击菜单
    28. sheetRightClickConfig: {
    29. delete: false, // 删除
    30. copy: false, // 复制
    31. rename: false, //重命名
    32. color: false, //更改颜色
    33. hide: false, //隐藏,取消隐藏
    34. move: false, //向左移,向右移
    35. },
    36. //自定义单元格右键菜单
    37. cellRightClickConfig: {
    38. copy: false, // 复制
    39. copyAs: false, // 复制为
    40. paste: false, // 粘贴
    41. insertRow: false, // 插入行
    42. insertColumn: false, // 插入列
    43. deleteRow: false, // 删除选中行
    44. deleteColumn: false, // 删除选中列
    45. deleteCell: false, // 删除单元格
    46. hideRow: false, // 隐藏选中行和显示选中行
    47. hideColumn: false, // 隐藏选中列和显示选中列
    48. rowHeight: false, // 行高
    49. columnWidth: false, // 列宽
    50. clear: false, // 清除内容
    51. matrix: false, // 矩阵操作选区
    52. sort: false, // 排序选区
    53. filter: false, // 筛选选区
    54. chart: false, // 图表生成
    55. image: false, // 插入图片
    56. link: false, // 插入链接
    57. data: false, // 数据验证
    58. cellFormat: false // 设置单元格格式
    59. }
    60. });
    61. });
    62. },
  • 相关阅读:
    数据指标口径不统一、重复开发?亿信ABI指标管理平台帮你解决
    面试官:讲讲MySql索引失效的几种情况
    TypeScript 条件语句
    R语言R包详解——stringr包:字符处理
    Flutter yuv 转 rgb
    什么是LRU算法
    Vuetify3:固定快捷按钮在屏幕右边
    【FatFs】手动移植FatFs,将SRAM转化为文件系统
    IntelliJ IDEA 使用 Maven 时不加载本地私服的最新版本快照(snapshot)JAR 包
    sscanf(“hello, world“, “%*s%s“, buf) -- “%*s%s“
  • 原文地址:https://blog.csdn.net/ZMJ_QQ/article/details/126013470