投稿
  1. 极客之音首页
  2. 前端开发

获取文件blob流地址实现下载功能

李, 若俞 • • 前端开发 • 阅读 299

获取文件blob流地址实现下载功能

应用场景

该功能主要是通过读取文件流，处理blob流为浏览器识别地址并返回回调处理方法,来处理一些通用的post下载功能或者获取blob流地址进行其他操作的功能。

  • 例如：pdf预览

解决方案

方案一

说明:   统一处理获取blob流地址与post形式下载功能结合为一个方法处理

  1. 引入filesBlobDeal处理方法
import { filesBlobDeal } from '@/utils/common';
  1. 调用filesBlobDeal处理方法
let fileObj = {
 reqType: '', // 接口请求类型：必传项，传入"POST"或者"GET"
 fileName: '', // 文件名称：下载文件时必传,其他情况下可不传，若传时 ".pdf"， ".png"， ".zip" 等类型后缀需要拼接上：例如：'word测试文档' + ".pdf"
 dealType: '', // 文件处理类型：必传项，传入下载文件：'downLoad' 或者 预览时处理blob流为浏览器识别的地址: 'blobUrl'
 paramObj: {}, // 入参对象值：非必传项，根据业务场景处理
};
const hide = message.loading('下载中..', 0); // 处理加载提示：下载中.. 加载中.. 等，自己根据需要场景修改
filesBlobDeal(url, fileObj, (code, msg, blobUrl) => {
  if (code == 200) {
    if(msg){message.success(msg);};
 // 下面处理回调成功后业务逻辑

 } else if (code == 30001) {
    message.info(msg);
 } else {
    message.error('请求异常！');
 }
  hide(); // 关闭加载提示
});

备注: 若使用方法为获取blob流地址,需要在使用完成后根据回调方法中获取的blobUrl使用window.URL.revokeObjectURL(url); 来清除释放createObjectURL创建的对象。

  1. filesBlobDeal处理逻辑方法
/*
 * 读取文件流，处理blob流为浏览器识别地址，返回回调处理方法
 * 入参说明：url：接口请求地址， fileObj：文件对象说明， callback(code, msg，blobUrl)：回调方法 ：
 * code 接口响应状态码：200 正常 其他（400，500等）30001：无权限异常(接口定义) ：调用失败，msg: 异常信息， blobUrl：浏览器识别的blob地址
 * let fileObj = {
      reqType: '',         // 接口请求类型：必传项，传入"POST"或者"GET"
      fileName: '',        // 文件名称：非必传项，下载文件时必传,其他情况下可不传，若传时 ".pdf"， ".png"， ".zip" 等类型后缀需要拼接上
      dealType: '',        // 文件处理类型：必传项，下载文件：'downLoad' 或者 预览时处理blob流为浏览器识别的地址: 'blobUrl'
      paramObj: {},        // 入参对象值：非必传项，根据业务场景处理
    };
 */
export function filesBlobDeal(url, fileObj, callback) {
  getFilesBlob(url, fileObj, function (code, blob) {
    let reader = new FileReader();
    // 当读取操作完成时调用
    reader.onload = function (event) {
      let content = reader.result;                         // 读取完成后，获取文件流内容
      const url = window.URL.createObjectURL(blob);
      if(fileObj && fileObj.dealType && fileObj.dealType == 'downLoad'){ // 下载文件
        let fileType = fileObj.fileName.slice(fileObj.fileName.lastIndexOf('.') + 1).toLowerCase();
        if(fileType == 'pdf'){
          if (content.indexOf('PDF') > -1) {               // 如果文件是pdf类型关键字
            const a = document.createElement("a");
            a.href = url;
            a.download = fileObj.fileName;                 // 文件名称
            a.click();
            window.URL.revokeObjectURL(url);               // 浏览器会自动释放createObjectURL创建的对象
            callback && callback(code, "下载完成！");
          }else {
            callback && callback(30001, "您无权下载该文件");
          }
        }else{
          const a = document.createElement("a");
          a.href = url;
          a.download = fileObj.fileName;                   // 文件名称
          a.click();
          window.URL.revokeObjectURL(url);                 // 浏览器会自动释放createObjectURL创建的对象
          callback && callback(code, "下载完成！");
        }
      }else{                                               // 预览时处理blob流为浏览器识别的地址
        callback && callback(code,undefined,url);
      }
    };
    reader.readAsText(blob);                               // 读取文本文件
  });
}
// 获取文件的Blob值
function getFilesBlob(url, fileObj, callback) {
  let xhr;
  if (typeof XMLHttpRequest != 'undefined') {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  };
  xhr.open(fileObj.reqType, url, true);
  xhr.responseType = "blob";
  let paramsObjStr = '';
  if(fileObj.paramObj){                                    // 请求参数
    xhr.setRequestHeader("Content-Type", "application/json");
    paramsObjStr = JSON.stringify(fileObj.paramObj);
  }
  xhr.onload = function () {
    if (this.status == 200) {
      if (callback) callback(200, this.response);
    }
    else {
      if (callback) callback(this.status);
    }
  };
  if(fileObj.paramObj){
    xhr.send(paramsObjStr);
  }else{
    xhr.send();
  };
}
/*
 * 浏览器会自动释放createObjectURL创建的对象
 */
export function releaseBlobUrl(url) {
  window.URL.revokeObjectURL(url);
}

方案二

说明:   获取文件blob流地址与post形式下载功能拆分为单个方法处理(推荐使用)

  1. 引入downloadFiles处理方法
import {downloadFiles } from '@/utils/common';
  1. 调用downloadFiles处理方法
  • 简单的window自动下载: 只需要传入拼接好参数的下载地址就行
downloadFiles(url); // 例如：'/**/**/download?id=120'
  • 通过post方式获取文件blob流下载
let fileObj = {
  reqType: '',  // 接口请求类型：必传项，传入"POST"或者"GET"
  fileName: '', // 文件名称：必传项，".pdf"， ".png"， ".zip" 等类型后缀需要拼接上
  paramObj: {}, // 入参对象值：非必传项，根据业务场景处理
 };
 const hide = message.loading('下载中..', 0); // 处理加载提示：下载中..
 downloadFiles(url, fileObj, (code, msg) => {
   if (code == 200) {
     if(msg){message.success(msg);};
  } else if (code == 30001) {
     message.info(msg);
  } else {
     message.error('下载异常！');
  }
   hide(); // 关闭加载提示
 });
  • downloadFiles处理方法:
/*
 * 通用型下载方法：包含直接下载及读取文件流，处理blob流为浏览器识别地址，进行下载
 * 入参说明：url：接口请求地址， fileObj：文件对象说明， callback(code, msg)：回调方法
 * code 接口响应状态码：200 正常 其他（400，500等）30001：无权限异常(接口定义) ：调用失败，msg: 异常信息
 * let fileObj = {
      reqType: '',         // 接口请求类型：必传项，传入"POST"或者"GET"
      fileName: '',        // 文件名称：必传项，".pdf"， ".png"， ".zip" 等类型后缀需要拼接上
      paramObj: {},        // 入参对象值：非必传项，根据业务场景处理
    };
 */
    export function downloadFiles(url, fileObj, callback) {
      if(fileObj){
        getFilesBlob(url, fileObj, function (code, blob) {
          let reader = new FileReader();
          // 当读取操作完成时调用
          reader.onload = function (event) {
            let content = reader.result;                        // 读取完成后，获取文件流内容
            const url = window.URL.createObjectURL(blob);
            let fileType = fileObj.fileName.slice(fileObj.fileName.lastIndexOf('.') + 1).toLowerCase();
            if(fileType == 'pdf'){
              if (content.indexOf('PDF') > -1) {               // 如果文件是pdf类型关键字
                const a = document.createElement("a");
                a.href = url;
                a.download = fileObj.fileName;                 // 文件名称
                a.click();
                window.URL.revokeObjectURL(url);               // 浏览器会自动释放createObjectURL创建的对象
                callback && callback(code, "下载完成！");
              }else {
                callback && callback(30001, "您无权下载该文件");
              }
            }else{
              const a = document.createElement("a");
              a.href = url;
              a.download = fileObj.fileName;                   // 文件名称
              a.click();
              window.URL.revokeObjectURL(url);                 // 浏览器会自动释放createObjectURL创建的对象
              callback && callback(code, "下载完成！");
            }
          };
          reader.readAsText(blob);                             // 读取文本文件
        });
      }else{
        window.location.href = url;                            // 仅传url地址时（无fileObj, callback参数），默认为处理为window自动下载
      }
    }
  1. 获取文件blob流地址
  • 引入getFilesBlobUrl处理方法
import {getFilesBlobUrl } from '@/utils/common';
  • 调用getFilesBlobUrl处理方法
let fileObj = {
  url: '',             // 接口请求地址
  paramObj: {},        // 入参对象值：非必传项，根据业务场景处理
};
const hide = message.loading('文件读取中..', 0);        // 处理加载提示：下载中..  加载中.. 等，自己根据需要场景修改
getFilesBlobUrl(fileObj, (code, blobUrl) => {
  if (code == 200) {
    // 下面处理回调成功后业务逻辑
 
  } else {
    message.error('请求异常！');
  }
  hide();             // 关闭加载提示
});
  • getFilesBlobUrl 处理方法
/*
 * 获取文件blob地址：读取文件流，处理blob流为浏览器识别地址，返回回调处理方法
 * 入参说明：fileObj：文件对象说明， callback(code, blobUrl)：回调方法 ：
 * code 接口响应状态码：200 正常 其他（400，500等），blobUrl：浏览器识别的blob地址
 * let fileObj = {
      url: '',             // 接口请求地址
      paramObj: {},        // 入参对象值：非必传项，根据业务场景处理
    };
 */
    export function getFilesBlobUrl(fileObj, callback) {
      fileObj.reqType = 'POST';                                // 默认只处理post格式
      getFilesBlob(fileObj.url, fileObj, function (code, blob) {
        let reader = new FileReader();
        // 当读取操作完成时调用
        reader.onload = function (event) {
          const url = window.URL.createObjectURL(blob);
          callback && callback(code,url);                      // 预览时处理blob流为浏览器识别的地址
        };
        reader.readAsText(blob);                               // 读取文本文件
      });
    }
  • 使用完成创建的blob流,需要及时销毁释放资源: 调用releaseBlobUrl处理方法
import {releaseBlobUrl } from '@/utils/common';
releaseBlobUrl(url);        // url：需要释放的地址,即刚才获取到的blobUrl

文章出自：https://juejin.cn/post/6994707174819627039

作者：Hani


原文始发于微信公众号（前端24）：获取文件blob流地址实现下载功能

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216690.html

赞 (0)
李, 若俞的头像李, 若俞
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！