zoukankan      html  css  js  c++  java
  • 后端返回文件流和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', 
  • 相关阅读:
    tomcat启动超时
    sqlserver存储过程及mybatis调用——待续
    linux各种顔色代表
    linux ngix安装
    vue 报错解决:TypeError: Cannot read property '_t' of undefined"
    给iview项目加一个i18n国际化翻译
    初探iview
    vue-eslint配置文件
    js中通过Object.prototype.toString方法----精确判断对象的类型
    判断是对象还是数组的方法
  • 原文地址:https://www.cnblogs.com/grow-up-up/p/14169487.html
Copyright © 2011-2022 走看看