【Vue】后端返回文件流,前端预览文件

 

let date;
        request({
          url: this.$route.query.url,
          method: 'get',
          responseType: 'blob',
        }).then(resp => {
          date = resp
          this.path = window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))
        }).catch((e) => {
          //旧版本浏览器下的blob创建对象
          window.BlobBuilder = window.BlobBuilder ||
            window.WebKitBlobBuilder ||
            window.MozBlobBuilder ||
            window.MSBlobBuilder;
          if (e.name == 'TypeError' && window.BlobBuilder) {
            if (date) {
              BlobBuilder.append(date);
              this.path = URL.createObjectURL(new BlobBuilder().getBlob("application/pdf"))
            }
          } else {
            console.log("浏览器版本较低,暂不支持该文件类型预览");
          }
        }).finally(() => {
          window.URL.revokeObjectURL(this.path);
        })
responseType必须设置为blob
  <iframe style="width: 100%;height: 500px" :src="path"></iframe>

文件预览效果

相关推荐

  1. 前端pdf文件(返回pdf文件)

    2024-01-18 07:18:03       30 阅读
  2. 返回文件格式,前端vue 导出下载表格

    2024-01-18 07:18:03       34 阅读
  3. 返回文件pdf 下载

    2024-01-18 07:18:03       38 阅读
  4. 前端处理axios请求下载返回文件

    2024-01-18 07:18:03       35 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 07:18:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 07:18:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 07:18:03       82 阅读
  4. Python语言-面向对象

    2024-01-18 07:18:03       91 阅读

热门阅读

  1. Spring boot 常见注解

    2024-01-18 07:18:03       50 阅读
  2. ChatGPT 和 文心一言 的优缺点及需求和使用场景

    2024-01-18 07:18:03       48 阅读
  3. GitLab服务器忘记root密码处理方式

    2024-01-18 07:18:03       52 阅读
  4. 【VUE】点击按钮下载全部链接文件

    2024-01-18 07:18:03       56 阅读
  5. SpringBoot-01

    2024-01-18 07:18:03       47 阅读
  6. React父组件向子组件传值

    2024-01-18 07:18:03       59 阅读
  7. 笨蛋学设计模式结构型模式-组合模式【12】

    2024-01-18 07:18:03       45 阅读
  8. MATLAB Fundamentals>>Representing Discrete Categories

    2024-01-18 07:18:03       61 阅读
  9. Hadoop之mapreduce参数大全-7

    2024-01-18 07:18:03       44 阅读
  10. flutter 播放SVGA动图

    2024-01-18 07:18:03       63 阅读
  11. Spring Boot整合Junit

    2024-01-18 07:18:03       45 阅读