后端返回文件流和json格式的方式进行文件下载导出

1. 接口返回的类型是文件流的格式

复制代码
fetch({
        url: this.exportUrl,
        method: "post",
        data: obj,
        noFormat: true,
        headers: {
          "Content-Type": "application/json; application/octet-stream"
        },
        responseType: "arraybuffer"
      }).then(result => {
        if (result.data.error_code) {
          this.$hMessage.error(result.data.error_message || "导出失败!");
          return;
        }
        var b = new Blob([result.data], { type: "application/vnd.ms-excel" });
        // 根据传入的参数b创建一个指向该参数对象的URL
        var url = URL.createObjectURL(b);
        var link = document.createElement("a");
        // 导出的文件名
       
        let fileName = "demo.xlsx";
        link.download = fileName;
        link.href = url;
        link.click();
      });
复制代码

 

 

 

 

2. 接口返回的类型是json格式,里面字段对应base64格式的文件

复制代码
fetch({
        url: this.exportUrl,
        method: "post",
        data: obj,
        noFormat: true,
        responseType: "json"
      }).then(result => {
        if (result.data.error_code) {
          this.$hMessage.error(result.data.error_message || "导出失败!");
          return;
        }
    // 核心 将base64的字符串转为文件流
        function dataURLtoBlob(base64Str) {
          var bstr = atob(base64Str), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
    // 下载的是excel格式的文件
          return new Blob([u8arr], { type: "application/vnd.ms-excel" });
        }
        var blob = dataURLtoBlob(result.data.result.base64);
        var downloadUrl = window.URL.createObjectURL(blob);

        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = decodeURI(result.data.result.filename);
        anchor.click();
        // window.URL.revokeObjectURL(blob);
      }).catch((e) => {
        this.$hMessage.error(e || "导出失败!");
      });    
复制代码

 

 

 

复制代码
其他类型:
 //// 'doc' => 'application/msword',
 //// 'bin' => 'application/octet-stream',
 //// 'exe' => 'application/octet-stream',
 //// 'so' => 'application/octet-stream',
 //// 'dll' => 'application/octet-stream',
 //// 'pdf' => 'application/pdf',
 //// 'ai' => 'application/postscript',
 //// 'xls' => 'application/vnd.ms-excel',
 //// 'ppt' => 'application/vnd.ms-powerpoint',
 //// 'dir' => 'application/x-director',
 //// 'js' => 'application/x-javascript',
 //// 'swf' => 'application/x-shockwave-flash',
 //// 'xhtml' => 'application/xhtml+xml',
 //// 'xht' => 'application/xhtml+xml',
 //// 'zip' => 'application/zip',
 //// 'mid' => 'audio/midi',
 //// 'midi' => 'audio/midi',
 //// 'mp3' => 'audio/mpeg',
 //// 'rm' => 'audio/x-pn-realaudio',
 //// 'rpm' => 'audio/x-pn-realaudio-plugin',
 //// 'wav' => 'audio/x-wav',
 //// 'bmp' => 'image/bmp',
 //// 'gif' => 'image/gif',
 //// 'jpeg' => 'image/jpeg',
 //// 'jpg' => 'image/jpeg',
 //// 'png' => 'image/png',
 //// 'css' => 'text/css',
 //// 'html' => 'text/html',
 //// 'htm' => 'text/html',
 //// 'txt' => 'text/plain',
 //// 'xsl' => 'text/xml',
 //// 'xml' => 'text/xml',
 //// 'mpeg' => 'video/mpeg',
 //// 'mpg' => 'video/mpeg',
 //// 'avi' => 'video/x-msvideo',
//// 'movie' => 'video/x-sgi-movie', 
复制代码

 

posted @   蛙仔  阅读(6832)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示