精华内容
下载资源
问答
  • 前端处理文件流自动下载

    千次阅读 2018-07-20 17:22:00
    * model.name:下载文件名称 * model.data: 请求参数 * model.type: 请求类型 post get * */ function exportLists(model) { var layerIndex=layer.msg('正在导出文件,请稍后...', {icon: 16,sh...
    /**
     * 公共导出功能
     * model.url:请求后台地址
     * model.name:下载文件名称
     * model.data: 请求参数
     * model.type: 请求类型  post get
     * */
    function exportLists(model) {
        var layerIndex=layer.msg('正在导出文件,请稍后...', {icon: 16,shade: 0.01,time: 100000 });
        var xhr=null;
        if (window.XMLHttpRequest) {//Mozilla 浏览器
            xhr = new XMLHttpRequest();
        }else {
            if (window.ActiveXObject) {//IE 浏览器
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    try {//IE 浏览器
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                    }
                }
            }
        }
        xhr.open(model.type, model.url, true);
        xhr.responseType = "blob";
        xhr.setRequestHeader("Authorization", sessionStorage.getItem('cookieKey'));
        //post请求一定要添加请求头才行不然会报错
        if(model.type=='post'){
            xhr.setRequestHeader("Content-type","application/json");
        }
        xhr.onload = function() {
            if (this.status == 200) {
                var fileName = this.getResponseHeader("content-disposition");
                var blob = this.response;// this.response也就是请求的返回就是Blob对象
                var a = document.createElement('a');
                //一个字符串,表明该Blob对象所包含数据的MIME类型
                blob.type = "application/excel";
                var url = URL.createObjectURL(blob);
                a.href = url;
                $("body").append(a);
                var fileType = ".xls";
                if(fileName.endsWith(".xlsx")){
                    fileType = '.xlsx';
                }
                a.download = new Date().getFullYear()+model.name+dateFormat(new Date(),1)+fileType;
                if(!!window.ActiveXObject || "ActiveXObject" in window){
                    window.navigator.msSaveOrOpenBlob(blob, new Date().getFullYear()+model.name+dateFormat(new Date(),1)+fileType)
                }else {
                    a.click()
                }
                window.URL.revokeObjectURL(url);
            }else{
                layer.msg('导出错误!')
            }
        }
        xhr.send(model.data);
    }
    展开全文
  • 前端处理文件流、base64转文件下载

    千次阅读 2019-10-29 09:26:35
    1. 处理文件流下载 async ipSecDownload() { let res = await this.$http.get( "/api/UserInfo/Download?type=ExecuteIPsec", { responseType: "arraybuffer" } ); if (res.status !== 200) return...

    1. 处理文件流下载

    async ipSecDownload() {
      let res = await this.$http.get(
        "/api/UserInfo/Download?type=ExecuteIPsec",
        {
          responseType: "arraybuffer"
        }
      );
      if (res.status !== 200) return this.$message.error(res.statusText);
      this.$message.success(res.statusText);
      
      let blob = new Blob([res.data]);
      let downloadElement = document.createElement("a");
      let href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      downloadElement.download = "IPSEC逻辑推断日志.txt";
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document.body.removeChild(downloadElement);
    }
    

    2. base64转文件下载

    /**
     * base64转Blob函数
     * @param {string} b64Data
     * @param {string} contentType
     * @param {number} sliceSize
     */
    b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || "";
      sliceSize = sliceSize || 512;
    
      var byteCharacters = atob(b64Data);
      var byteArrays = [];
    
      for (
        var offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
    
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }
    
        var byteArray = new Uint8Array(byteNumbers);
    
        byteArrays.push(byteArray);
      }
    
      var blob = new Blob(byteArrays, { type: contentType });
      return blob;
    }
    
    	// 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.download = res.Data.ESSID + ".cap";
        eleLink.style.display = "none";
        // 字符内容转变成blob地址
        var blob = new Blob([this.b64toBlob(res.Data.CapturedDataBase64)]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    
    展开全文
  • 今天后端让帮忙做个导出excel的功能,ok。 后端提供的数据: ...// 调用该方法,传入chnlCode即可实现文件流下载 function downloadExcel(chnlCode) { let url = '/content/scale/downloadEx...

    今天后端让帮忙做个导出excel的功能,ok。

    后端提供的数据:

    接口:content/scale/downloadExcel

    参数为:chnlCode=xxx

     

    前端处理:

    // 调用该方法,传入chnlCode即可实现文件流下载
    function downloadExcel(chnlCode) {
        let url = '/content/scale/downloadExcel?chnlCode=' + chnlCode;
        let aDom = $("<a>");
        aDom.attr("href", url);
        $("body").append(aDom);
        aDom[0].click();
        aDom.remove();
    }

     

    展开全文
  • 【react踩坑】前端显示文件流图片

    千次阅读 2019-09-07 11:50:25
    react前端处理文件流图片 场景:后端传过来一个文件流图片,需要前端在页面展示。打印出来的ArrayBuffer对象: 一开始借鉴了思否上看到的写法,先把获取的ArrayBuffer转成base-64 编码再显示(Uint8Array数组每一位...

    场景: 后端传过来一个文件流图片,需要前端在页面展示。打印出来的ArrayBuffer对象如下:
    在这里插入图片描述
    一开始借鉴了思否上看到的写法,先把获取的ArrayBuffer转成base-64 编码再显示(Uint8Array数组每一位转码后累加再用btoa函数转成base64编码),实现如下:

    function getBase64(img) {
        const base64Url = `data:image/png;base64,${window.btoa(
          new Uint8Array(img).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ""
          )
        )}`;
        return base64Url;
      }
      // ...
     axios.get(`/get/pic?url=${url}`, {
          responseType: "arraybuffer"
        }).then(({ data }) => { getBase64(data) })
          .then(() => { ... });
    

    后来经大佬指点,发现原来不用转码,直接把图片src换成请求url就可以了,也不需要加上responseType的请求头

      <img src={`/get/pic?url=${imgId}`} />
    
    展开全文
  • 前端音频文件流

    千次阅读 2021-01-12 10:37:58
    blob语音 前端播放 https://blog.csdn.net/Beth__hui/article/details/101442681 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输 https://www.cnblogs.com/dongxixi/p/11005607...
  • 结合各种情况,我总结了前端最常用的三种方法来接受后端传过来的文件流并下载,针对不同的情况可以使用不同的方法 方法一 使用场景 针对后端的get请求 &lt;a href="后端文件下载接口地址" &gt;...
  • 后端返回文件流前端需要对返回的文件流处理进行文件下载 先是发送请求的时候声明返回blob格式 url: '',(你的地址) method: 'post', data: params, responseType: 'blob' (这里很重要) 然后将返回的数据传给...
  • 前端接收处理文件流(Vue下载excel)

    千次阅读 2020-09-18 09:56:16
    一般在做数据统计的时候,后端不会将要下载的东西存到服务器上然后返回下载地址,而是直接返回文件流,这个时候就要前端自己来接收处理流了 处理流程 先说下要接收处理的流程 将我们接收到的流存放至 对象URL 中 ...
  • 前端处理下载后端返回的文件流

    千次阅读 2020-11-03 10:13:37
    后端返回文件流前端需要对返回的文件流处理进行文件下载 先是发送请求的时候声明返回blob格式 url: '', method: 'post', data: params, responseType: 'blob' //responseType: 'ArrayBuffer' 然后将返回的数据传...
  • 前端解析文件流

    千次阅读 2019-11-05 18:38:49
    结合各种情况,我总结了前端最常用的三种方法来接受后端传过来的文件流并下载,针对不同的情况可以使用不同的方法。 方法一 使用场景 针对后端的get请求 具体实现 直接用个标签来接受后端的文件流 <a href="后端...
  • 前端处理后端返回的二进制流文件

    千次阅读 2020-04-13 18:24:13
    前端处理后端返回的二进制流文件 https://blog.csdn.net/znbb_/article/details/95062866
  • Vue 前端显示文件流图片

    千次阅读 2020-08-07 15:17:53
    通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片。 前端代码 <template> <v-container> // 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死 <input class=...
  • GET方式: func_export(){ let url = "/xxx/xxx/xxx/downloadFile?... // 定义请求完成的处理函数,...注意事项:POST方式的下载,使用axios会导致数据损坏,下载到的文件会发生错误,所以使用原生的XHR来处理
  • .post('xxxxx接口地址') .send(obj)//需要的参数 ...处理文件流 前端页面处理 .then((res) => { const blob = res.body;//接口返回的文件流 const reader = new FileReader(); reader.readAsD...
  • 前端文件流导出为csv/excel文件

    千次阅读 2019-03-19 20:00:04
    前端文件流导出为csv/excel文件 1.后端直接返回文件连接: 前端正常请求,后端返回一个静态文件链接,直接使用: window.location.href = url 简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且...
  • axios({ url: '下载接口URL', ... // data就是接口返回的文件流 let data = res.data if (data) { let attrs = res.headers['content-disposition'].split(';')  // 获取文件名 let fileName = '' ...
  • 原生js处理后台返回的文件流 利用Blob对象接受并处理后台返回的文件流,在利用URL对象将Blob的实例化对象转换成一个a标签可以点击的链接地址,就是这么简单,废话不多说! 直接看代码 //如有必要设置xhr.response...
  • 前端处理后端文件流并下载的方法

    千次阅读 2019-02-19 19:18:49
    // 错误处理 console.log("Error", data.statusText); } } const a = document.createElement('a'); const blob = new Blob([data]); const blobUrl = window.URL.createObjectURL(blob); download(blobUrl)...
  • 下载文件时,设置文件名需要在header中设置,所以必须将文件名的编码转为iso8859-1编码。 response.setHeader("Content-Disposition", "inline;fileName=\"" + new String(fileName.getBytes("UTF-8"), "ISO8859...
  • 第一种、xhr:{ responseType: ‘blob’ },处理文件流为Blob类型 第二种、在接收到文件流后,用下面的方法将其处理为Blob类型, let file_blob = new Blob(res); Blob文件类型处理(chrome): /* * data...
  • 在页面下载文件时,可以根据路径如 a 标签的 href="" ,但是有时将文件直接上传到后台做处理后回传到前端再去下载文件,这时后台返回的是文件流,并没有路径提供下载。 解决方案,转成bolb对象 Blob对象表示一个不可...
  • 前端下载EXCEL文件,后端返回文件流处理 axios({ url: '下载接口URL', method: 'post', data: {}, responseType: 'blob' }).then((res) => { // data就是接口返回的文件流 let data = res.data if (data...
  • 1、content-disposition ...// 格式化文件流下载content-disposition的filename值 //headers为请求返回的header export function formatFileName(headers) { const patt = new RegExp('filename=...
  • 在我们的项目中,登录的时候有一个图形验证码功能,这个图形实际为一张后台返回的图片,通过get请求接口获取图片。 问题一实现方法 将接口返回的数据设置成返回blob类型:responseType:‘blob’ axios({ method...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 116,417
精华内容 46,566
关键字:

前端处理文件流