前端实现预览文件流

  1.图片类型文件

//template

<template>
  <img :src="src">
</template>


//script

T.ajax({
  url: xxx,
  beforeSend:xhr=>{
    xhr.responseType = "blob"; // 返回类型blob
  },
  dataFilter: e=>{
    let flow = e.response
    let blob = new Blob([flow])
    let url = window.URL.createObjectURL(blob)
    this.src =  url     
  }
})

  2.pdf类型文件

//template

<template>
  <iframe :src="src"></iframe>
</template>


//script

T.ajax({
  url: xxx,
  beforeSend:xhr=>{
    xhr.responseType = "blob"; // 返回类型blob
  },
  dataFilter: e=>{
    let flow = e.response
    let blob = new Blob([flow],{
      type: 'application/pdf;charset=utf-8'
    })
    let src = window.URL.createObjectURL(blob)
    this.src = src
  }
})

  3.文本类型文件

//template

<template>
  <iframe :src="src"></iframe>
</template>


//script

T.ajax({
  url: xxx,
  beforeSend:xhr=>{
    xhr.responseType = "blob"; // 返回类型blob
  },
  dataFilter: e=>{
    let flow = e.response
    let blob = new Blob([flow])
    let src = window.URL.createObjectURL(blob)
    this.src = src
  }
})