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

javascript 复制代码
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
html 复制代码
  <iframe style="width: 100%;height: 500px" :src="path"></iframe>

文件预览效果

相关推荐
伟笑14 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~32 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士33 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢33 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子41 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪41 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构