首页 > 其他分享 >vue导出文件

vue导出文件

时间:2022-09-21 10:13:00浏览次数:56  
标签:文件 vue res blobURL 导出 window blob downloadElement data

  /**导出 */
    async toExcel() {
      // let result = await this.axios({
      //   method: 'get',
      //   url: `issdc-manage/gameController/export.do`,
      // });
      // window.open(`${this.serverUrl}/issdc-manage/gameController/export.do=${this.selectedRowKeys}`);
      await this.axios({
        method: 'get',
        url: `entryFormController/export.do`,
        data: data,
        params: data,
        responseType: 'blob', //返回是个文件
      }).then((response) => {
        download(response, data); //then直接下载,方法在下边
      });

      // 下载文件
      function download(res) {
        let blob = new Blob([res.data], { type: res.headers['content-type'] }); //type是文件类,详情可以参阅blob文件类型
        // 创建新的URL并指向File对象或者Blob对象的地址

        let dis = res.headers['content-disposition'];
        let fileName = decodeURIComponent(dis.split('attachment;filename=')[1]);
        const blobURL = window.URL.createObjectURL(blob);
        // window.open(blobURL);
        var downloadElement = document.createElement('a');

        downloadElement.href = blobURL;

        downloadElement.download = fileName;

        document.body.appendChild(downloadElement);

        downloadElement.click();

        document.body.removeChild(downloadElement);

        window.URL.revokeObjectURL(blobURL);
      }
    },

 

标签:文件,vue,res,blobURL,导出,window,blob,downloadElement,data
From: https://www.cnblogs.com/book-student/p/16714617.html

相关文章

  • vue上传证书
       //队伍证书上传getFile(){varthat=this;////1创建formDataletformData=newFormData();////2添加数据,key可以......
  • Oralce中,在SqlPlus执行PL/SQL,begin...end 或者 .sql文件
    执行begin...end(结尾记得加上'/')begindbms_output.put_line('HelloWorld');end;/务必在结尾加上'/'否则无法执行,命令行会处于阻塞等待状态执行.sql文件@D:/......
  • vue多图片上传组件
         <template><!--上传控件用法:<upload-widgetv-model="imgUrl"></upload-widget>--><divclass="clearfix"><a-upload......
  • Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!
    场景Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126957202上面......
  • 【AGC】崩溃服务上传mapping混淆文件报错问题
    ​【问题描述】在上传崩溃服务的混淆Mapping文件时出现下列报错,混淆Mapping文件和原生符号文件的大小限制分别是多少?​ 【解决方案】.在AGC页面手动上传这种方式支持......
  • dotnet 解析 TTF 字体文件格式
    在Windows下,可以使用DX提供的强大能力,调用DX读取TTF字体文件,获取字体文件的信息以及额外的渲染信息。特别是基于DX的WPF更是加了一层封装,使用FontFamily类型......
  • VisualStudio 禁用移动文件到文件夹自动修改命名空间功能
    在VisualStudio2022里的某个版本开始,将会在移动文件到其他文件夹时,自动修改命名空间,使用匹配文件夹路径的命名空间。如果这个功能能顺手将其他引用此类型的全部符号同时......
  • Total Commander 使用 mklink 建立文件夹链接 将 C 盘文件迁移到其他盘
    在安装完成了100000000个软件之后,我1T的C盘的空间终于不足了,由于安装了大量的特别挑的不专业的软件,强行放在其他的盘将水土不服。于是在老师傅的指导下,我采用了mkli......
  • Vue 组合式函数简介
    Vue组合式函数:export导出一个函数。函数内可以定义生命周期勾子、数据及方法,它是可复用的模块。类似Mixin混入。但比Mixin更有优势。组合式函数示例:useDemo.js impo......
  • python 文件操作
    文件操作打开:open(file,mode="r",buffering=None,encoding=None,errors=None,newline=None,closefd=True,opener=None)#file文件路径,如果该文件在同......