首页 > 其他分享 >vue3 导出为Excel文件

vue3 导出为Excel文件

时间:2024-08-31 10:37:24浏览次数:10  
标签:const Excel vue3 导出 downloadUrl link error response

  • 服务端给的一个下载接口:/order/exportOrderOpenInvoice
  • 导出转化为Excel
    const exportOrder= async()=>{
     let reqData = {};
       let exportOrderOpenInvoiceUrl = "/order/exportOrderOpenInvoice"; 
       try {
         const response = await axios.get(exportOrderOpenInvoiceUrl, {
           params: reqData, 
           responseType: 'blob', //设定文件流 blob类型  (根据后端返回的类型设定)
        });
         if (response.data instanceof Blob) {
           const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
           const link = document.createElement('a');
           link.href = downloadUrl;
           link.setAttribute('download', '导出的表格.xlsx'); 
           document.body.appendChild(link);
           link.click();
           link.remove(); 
           window.URL.revokeObjectURL(downloadUrl); 
         }
       } catch (error) {
         console.error('导出失败:', error);
         message.error('导出失败');
       }
    }

标签:const,Excel,vue3,导出,downloadUrl,link,error,response
From: https://www.cnblogs.com/xz1005xfx/p/18389945

相关文章

  • vivo手机导出微信聊天记录方法
    1,先在手机上打开“开发人员选项”并将USB调试功能打开。再将手机通过数据线连接到电脑,打开电脑上已经安装好的“互传备份助手”(点击此处进入下载页面),再点击界面上的新建备份。注意:在电脑上运行互传备份助手时,会提醒手机上也要安装互传助手,按提示安装即可。 2,在互传备份助手窗......
  • vue3+ts封装一个uniapp的自动滚动列表,实现看板效果
    电视机上要以列表展示数据,并且数据会实时更新,电视机不能点击,所以考虑自动播放的一个效果。展示方案有两种:1、列表上下自动滚动实现轮播效果。(此时具体滚动的高度由用户自己决定,每次滚动几条数据)2、列表以“页”的形式做成轮播图的翻页效果。由于项目的电视机是有任务提示作......
  • Python数据分析的数据导入和导出
    数据分析的数据的导入和导出前言一、导入数据导入Excel表格数据read_excel示例导入CSV格式数据read_csv()示例导入JSON格式数据JSON简介pandas导入JSON数据read_json()导入txt文件read_table示例导入(爬取)网络数据read_html()示例二、输出数据CSV格式数据输出to_csv示......
  • vue3下拉菜单点击之后缓慢展开与缓慢关闭
    利用 max-height 来实现下拉菜单的缓慢展开和关闭效果。通过设置一个固定的 max-height 值以及过渡效果,可以让菜单在展开和关闭时产生动画效果。<template><divclass="dropdown"><divclass="selected"@click="toggleDropdown">......
  • Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NET Co
    Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NETCore)https://pan.baidu.com/s/1SBt4RTT_m6uA9pk857KlcQ?pwd=6666https://www.bilibili.com/video/BV16s4y1m7bd/?spm_id_from=333.337.search-card.all.click&vd_source=e6b56a12a1d9ef11f6c13......
  • nodejs实现将json转化为excel文件
    本文使用node.js实现将json数据转换导出为excel文件。一、安装json2xls库npmijson2xls二、封装转换方法新增jsonToExcel.js文件,该文件用于将json数据(对象数组)转换为excel文件,文件内容如下:constfs=require('fs')//引入文件系统模块constjson2xls=require('json2......
  • vue使用html2canvas将页面dom生成图片,解决页面中带有图片导出
    安装npm installhtml2canvas引入importhtml2canvas from 'html2canvas'使用this.$refs.canvasToPic是div的dom,只要在这个div中的区域都可以生成图片1this.$nextTick(()=>{2html2canvas(this.$refs.canvasToPic,{useCORS:true,logging:true}).......
  • 在Vue3中实现文件上传功能,结合后端API
    随着现代Web应用程序的不断发展,文件上传成为了用户交互中不可或缺的一部分。在本篇博客中,我们将深入讨论如何在Vue3中实现一个文件上传功能,并与后端API进行交互。我们将使用Vue3的CompositionAPI(setup语法糖)来构建我们的示例。##1.了解需求在实现文件上传之前,我们需要明确......
  • 实现一个动态评论系统:Vue3与后端API交互
    在当今的开发环境中,评论系统是多种应用中不可或缺的一部分,本文将带您深入了解如何使用Vue3实现一个动态评论系统,并与后端API进行交互。我们将重点使用Vue3的compositionAPI(setup语法糖)来构建这个系统。需求概述在构建动态评论系统时,我们需要实现以下功能:获取评论......
  • vue3-pinia保持数据时效性,不会因为刷新浏览器丢失实时数据(pinia-plugin-persistedstat
    1.方法一(pinia-plugin-persistedstate)1.安装插件-pinia-plugin-persistedstateyarnaddpinia-plugin-persistedstatenpmipinia-plugin-persistedstate2.在pinia中注册import{createPinia}from'pinia';importpiniaPluginPersistedstatefrom'pinia-pl......