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

 

let date;request({url: this.$route.query.url,method: 'get',responseType: 'blob',}).then(resp => {date = respthis.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>

文件预览效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/409951.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

13 | 使用代理ip爬取安居客房源信息

这是一个简单的Python爬虫代码,用于从安居客网站爬取房地产信息。该爬虫使用了代理IP来绕过可能的封禁,并提供了一些基本的信息抽取功能。 如果访问过多,那么可能出现了验证码 对此,最好的方法就是换ip。 使用代理IP的主要目的是保护爬虫的稳定性和隐私。以下是一些常见的原…

SSM(Spring,SpringMVC,MyBatis)整合项目

文章目录 SSM(Spring,SpringMVC,MyBatis)整合项目1.创建表2.创建工程3.pom.xml4.log4j.properties5.db.properties6.applicationContext-dao.xml7.applicationContext-tx.xml8.applicationContext-service.xml9.springmvc.xml10.web.xml11.pojo12.mapper13.service14.controlle…

线性代数的学习和整理23:用EXCEL计算 向量/向量组的点乘 (内积) (建设ing)

目录 前言&#xff1a;EXCEL里的的向量相关计算公式 0.1 EXCEL里相关公式 0.2 先说结论&#xff1a;向量组的点乘公式和 向量组的点乘公式不一样 1 向量的点乘 (内积) 1.1 向量的点乘公式 1.2 EXCEL里向量点乘的计算 ​编辑 1.3 向量点乘的性质 1.3.1 内积的公式…

【Web】NSSCTF Round#16 Basic个人wp(全)

出题友好&#xff0c;适合手生复健。 目录 ①RCE但是没有完全RCE ②了解过PHP特性吗 ①RCE但是没有完全RCE 上来就是一段md5八股 (string)就是不让用数组了&#xff0c;然后强比较需要md5碰撞 ?md5_1%4d%c9%68%ff%0e%e3%5c%20%95%72%d4%77%7b%72%15%87%d3%6f%a7%b2%1b%dc…

npmvue详解

1、npm是node.js的一个软件依赖包管理工具 2、当前目录下面一般会有一个package.json文件 3、npm install 会去按照package.json文件中的依赖去下载依赖包 默认会下载到当前目录中的node_modules文件夹下&#xff0c;-g会进行全局安装 4、package.json文件中有两种依赖关系 …

Ubantu 安装vscode配置c/c++环境

文章目录 安装VSCode注意 snap包冲突 安装C/C编译环境注意 进程锁占用 配置C开发环境安装插件配置tasks.json配置c_cpp_properties.json 配置调试环境配置 launch.json 安装VSCode 方式一&#xff1a;ubantu 软件里面直接安装 方式二&#xff1a;官网下载deb安装包https://cod…

SpringBoot多环境配置与添加logback日志

1、多环境配置 一个项目会有多个运行环境 所以SpringBoot提供了可以适应多个环境的配置文件 每个文件对应一个端口号 application-dev.yml 开发环境 端口8090 application-test.yml 测试环境 端口8091 application-prod.yml 生产环境 端口8092 在application中选择使用哪个…

红日靶场2 ATTCK攻击

360免杀其实没有你想象的那么难 首先最重要的是 你要用免杀脚本对你所生成的木马病毒进行加密 然后加密系统的内核&#xff0c;就是上一篇文章所提及的 是通过两次加密之后 所输出的结果&#xff0c;让360无法感知到&#xff0c;然后先通过java反序列化工具将冰蝎工具的JSP后门…

c语言:用一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

题目 用一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 如&#xff1a;01&#xff0c;是1&#xff0c;交换完是10&#xff0c;是2. 思路 1.分别取出奇数位上的数字和偶数位上的数字 举个例子&#xff1a;1001 0110 1001 0110 奇…

长亭科技-雷池WAF的安装与使用

目录 1、安装雷池 2、登录雷池 3、简单配置 4、防护测试 5、其他补充 1、安装雷池 在Linux系统上执行如下命令 &#xff08;需要docker环境&#xff0c;提前把docker、docker-compose 装好&#xff09; bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release…

二叉树的遍历 Java

二叉树的遍历 递归法前序遍历中序遍历后序遍历改进 迭代法前序、后序遍历中序遍历 二叉树的统一迭代法(未完成)Java 中 null、NULL、nullptr 区别 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(in…

python代码练习:链表——分隔链表

参考知识&#xff1a; 什么是链表Optional有什么用 题目&#xff1a; 题目来源&#xff1a;力扣 代码&#xff1a; from typing import Optionalclass ListNode: 链表结点的数据类型 def __init__(self, val0,nextNone):self.val valself.next nextdef convert_to_linked…