前端二进制文件转blob链接

背景#

有的时候后端返回文件，文件是属于stream类型（二进制格式），我们获取到二进制格式的文件后可能是需要下载，也直接在页面上预览等等。

代码#

<template>
  <div class="app">
    <iframe
      :src="iframeSrc"
      scrolling="auto"
      style="border: 0; height: 100vh; width: 100vw"
    />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      iframeSrc: '',
    }
  },
  created() {
    // 该接口默认返回stream类型。
    // responseType: 指定响应结果为blob类型文件
    axios
      .get('http://127.0.0.1:3000/public/okdd1.pdf', {
        responseType: 'blob',
      })
      .then((res) => {
        const data = res.data
        // 将blob转blob地址
        const url = window.URL.createObjectURL(data)
        this.iframeSrc = url
      })
  },
}
</script>

<style lang="less" scoped></style>

效果#

参考#

https://blog.csdn.net/weixin_64317807/article/details/134446597