前端处理接口返回流方式

关于接口返回流处理
图片流处理
文件流处理（pdf）

关于接口返回流处理

通常前后端进行图片预览，要么后端直接给文件的具体url地址，要么给文件流，前端获取到文件流后进行相应处理。url地址就不多说不同格式的文件使用不同格式的标签，例如：img、video、object、embed、iframe等。本文实践讲的是服务端返回文件流前端处理：

图片流处理

方式一:

返回流的地址是可以直接 get 请求的，可以用 <img /> 标签,src 属性直接设置返回流的地址

  // get方式(API)获取img流接口
let ImgUrl = 'http://xxx.xxx.xxx.xxx:200/url?id=xxxx' 


  // 直接将url地址赋值为 src属性
  < img src = {ImgUrl} />

方式二:

任意接口，都可以通过 js 里把流拿到,转成 blob,再赋值给 <img /> 标签的 src 属性

// 任意接口方式，通过把流转为blob，再赋值给src属性
// 这里通过fetch方式演示,fetch中的response可以将流任意转换
// 如果是XMLHttpRequest或者axios，注意设置responseType（如blob）,用于指定响应中包含特定的数据类型。

// 1. 将blob转为url(createObjectURL只能用于 File和Blob)
let imgBlobToUrl = async(url) => {
  
  let response = await fetch(url)

  // response解析为blob
  let data= await response.blob()
  const blob = new Blob([data]);
  // blob 转为 url
  const blobUrl = URL.createObjectURL(blob)

  // 直接在元素上显示
  let imgElement = document.getElementById('img')
  imgElement.src = blobUrl

  // url开在浏览器中打开，新打开窗口显示（注意浏览器只支持特定的格式的文件预览）
  window.open(blobUrl)
}

// 2. 将blob转为Base64
let imgBlobToBase64 = async(url) => {
  
  let response = await fetch(url)

  // response解析为blob
  let data= await response.blob()
  const blob = new Blob([data]);

  const reader = new FileReader();

  //读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
  reader.readAsDataURL(blob);

  // 该事件在读取操作完成时触发
  reader.onload = function(){
  // 直接在元素上显示
  let imgElement = document.getElementById('img')
  imgElement.src = reader.result;
  };
}

// 3. 将ArrayBuffer转为Base64
let imgArrayBufferToBase64 = async (url) => {
  let response = await fetch(url)

  // response解析为arrayBuffer
  let data = await response.arrayBuffer()
  
  var binary = '';
  // ArrayBuffer不能直接操作，将ArrayBuffer转为TypedArray（类型数组）
  var bytes = new Uint8Array(data);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    // Unicode转换为字符（字符串）
      binary += String.fromCharCode(bytes[i]);
  }
  // 从一个字符串或者二进制数据编码一个 Base64 字符串。
  let bufferUrl = window.btoa(binary);
  // 设置
  // 直接在元素上显示
  let imgElement = document.getElementById('img')
  imgElement.src = 'data:image/png;base64,' + bufferUrl;
}

文件流处理（pdf）

// blob转url
let pdfBlobToUrl = async(url) => {
  let response = await fetch(url)

  // response解析为blob
  let data = await response.blob()
  // 设置blob类型为pdf
  const blob = new Blob([data], { type: 'application/pdf' });
  
  // 创建pdf数据url
  let pdfUrl = URL.createObjectURL(blob)

  // 直接在元素显示
  let iframeElement = document.getElementById('iframeElement')
  iframeElement.src = pdfUrl

  // url开在浏览器中打开，新打开窗口显示（注意浏览器只支持特定的格式的文件预览）
  window.open(pdfUrl)
}

// blob转Base64
let pdfBlobToBase64 = async (url) => {
  
  let response = await fetch(url)
  
  // 设置blob类型为pdf
  const blob = new Blob([data], { type: 'application/pdf' });

  const reader = new FileReader();

  //读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
  reader.readAsDataURL(blob);

  // 该事件在读取操作完成时触发
  reader.onload = function(){
  // 直接在元素上显示
  let iframeElement = document.getElementById('iframeElement')
  iframeElement.src = reader.result;
  };

}