web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?

如果你使用 window.open() 方法打开 PDF 文件,但浏览器不是预览而是下载文件,这可能是由于以下几个原因:

  • 服务器配置:服务器可能将 PDF 文件配置为下载而不是预览。例如,服务器可能设置了 Content-Disposition 响应头为 attachment,这会告诉浏览器该文件应该被下载。
  • MIME 类型:服务器发送的 MIME 类型可能是 application/octet-stream,这通常用于二进制文件下载。如果 MIME 类型是 application/pdf,浏览器通常会尝试预览 PDF 文件。
  • 浏览器设置:不同的浏览器可能有不同的设置,这些设置可能会影响它们如何处理 PDF 文件。例如,某些浏览器可能默认使用内置的 PDF 阅读器,而其他浏览器可能需要用户手动选择 PDF 阅读器。
  • PDF 文件本身:PDF 文件可能包含特定的元数据或设置,这些设置可能会影响浏览器如何处理文件。
  • 跨域问题:如果 PDF 文件位于不同的域上,浏览器可能会出于安全原因阻止预览,并要求用户下载文件

具体情况具体对待,我这里是服务器配置的 Content-Disposition 响应头为 attachment,所以默认下载文件

Content-Disposition 是 HTTP 响应头中的一个字段,用于指示响应的内容是以何种方式呈现给用户的。它主要用于描述如何处理响应体中的内容,例如是否应该将内容保存到磁盘,或者直接在浏览器中显示。

Content-Disposition 字段可以包含以下参数:

  • inline: 指示内容应该直接在浏览器中显示,而不是保存到磁盘。这是默认值。
  • attachment: 指示内容应该被下载并保存到磁盘。通常,浏览器会提示用户保存文件,而不是直接显示它。
  • filename: 指定下载文件的名称。这个参数通常与 attachment 参数一起使用。

所以这里具体使用axios来实现的,代码如下:

axios({method: 'get',url: '你的pdf文件的url',responseType: 'blob',headers: {'Content-Type': 'application/pdf','Content-Disposition': 'inline'}
}).then(response => {const url = window.URL.createObjectURL(response.data);window.open(url, '_blank');}).catch(error => {console.error(error);});

注意: 一些浏览器可能会阻止 window.open() 方法,即使你设置了 Content-Disposition: inline,不同的浏览器可能会有不同的默认行为。一些浏览器可能会忽略这个头部,而直接下载文件,而不是在浏览器中打开它。我使用的chrome貌似没问题,要是遇到其他浏览器不好使的话,那就换其他方案吧,常见的方案有: iframe结合 pdf.js、还有一些三方库vue-pdf等等等等

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

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

相关文章

pycharm快速更换虚拟环境

目录 1. 选择Conda 虚拟环境2. 创建环境3. 直接选择现有虚拟环境 1. 选择Conda 虚拟环境 2. 创建环境 3. 直接选择现有虚拟环境

联想“喜新厌旧”

科技新知 原创作者丨萧维 编辑丨蕨影 十月份,联想很忙。 先是2024联想科技创新大会15日在美国华盛顿州西雅图举行,联想大秀了一下自己在人工智能领域的创新产品、技术和解决方案,英特尔、AMD、英伟达三巨头更同时为其站台;后是与…

[白月黑羽]关于仿写类postman功能软件题目的解答

原题: 答: python文件如下 from PySide6.QtWidgets import QApplication, QMessageBox,QTableWidgetItem,QHeaderView,QWidget,QTableWidget from PySide6.QtCore import QEvent,QObject from PySide6.QtUiTools import QUiLoader import time import …

零基础Java第十八期:图书管理系统

目录 一、package book 1.1. Book 1.2. BookList 二、package user 2.1. User 2.2. NormalUser与AdminiUser 三、Main 四、NormalUser与AdminiUser的菜单界面 五、package operation 5.1. 设计管理员菜单 六、业务逻辑 七、完整代码 今天博主来带大家实现一个…

系统架构师考试极限18天备考复盘(2024年11月)

前言 写下这篇复盘笔记的时候还没有出成绩。目前泽崽还是在读研究生,在经过 大概2周多个全日 的极限备考之后,于11月10日参加了软考的系统架构师考试(高级)。目前对于“基础知识-案例分析-论文”的估分预期大概是:55-…

Unity肢体控制(关节控制)

前面的基础搭建网上自己搜,我这个任务模型网上也有,可以去官网看看更多模型,这里只讲述有模型如何驱动肢体的操作方式 第一步:创建脚本 第二步:创建Rig Builder 建空容器 加部件(Rig),加了之后…

用pandoc工具实现ipynb,md,word,pdf之间的转化

Pandoc 是一个强大的工具,可以实现多种文件格式之间的转换,包括 Jupyter Notebook (.ipynb)、Markdown (.md)、Word (.docx)、PDF 等格式。以下是具体的实现方法: 1. 安装 Pandoc 确保已安装 Pandoc: Linux: sudo apt install p…

二叉树遍历的非递归实现和复杂度分析

一,用栈实现二叉树先序遍历 1,原理 我用自己的口水话解释一下:准备一个栈,从根节点开始,先判断栈是否为空,如果否,就弹出一个元素,对弹出元素进行自定义处理,再将它的左…

【数据结构】什么是链栈?

在数据结构中,链栈(Linked Stack)是基于链表实现的一种栈结构,它在许多计算任务中有着广泛应用。对于初学者,理解链栈的概念、操作方式以及应用场景可以帮助我们更好地掌握数据结构的相关知识。在本篇文章中&#xff0…

Spring Boot编程训练系统:从概念到实现

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…

redis序列化数据查询

可以看到是HashMap,那么是序列化的数据 那么我们来获得反序列化数据 import java.io.ByteArrayInputStream; import java.io.IOException; import java.io.ObjectInputStream; import redis.clients.jedis.Jedis;public class RedisDeserializeDemo {public static…

PostgreSQL物化视图详解

物化视图简介 物化视图的产生背景与概念 产生背景 随着数据库规模的增大和查询复杂性的提高,数据库查询的性能问题变得越来越突出。为了优化查询性能,数据库系统引入了物化视图(Materialized View)的概念。物化视图是一种预先计…

球差控制操作数【ZEMAX操作数】

在光学设计中,对于球差的控制是必要的,那么在zemax中如何控制球差的大小,理解球差,以及使用相应操作数控制球差; 在这篇中主要写如何使用zemax操作数去控制或者消除球差,对球差进行简单的描述,之…

使用 FastAPI 和 Tortoise ORM 构建高效的异步应用:完整指南

在现代 Web 开发中,选择合适的框架和工具对构建高效的应用至关重要。FastAPI 作为一个快速、现代的 Web 框架,以其异步特性和对 Python 类型提示的支持而备受欢迎。而 Tortoise ORM 则是一个适用于异步应用的轻量级 ORM,特别适合与 FastAPI 结…

学习threejs,使用TWEEN插件实现动画

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.PLYLoader PLY模型加…

sql中in()方法查询参数过多处理小记

Springboot 多线程分批切割处理 大数据量List集合 ,实用示例 Java使用多线程批次查询大量数据(Callable返回数据)方式 问题背景 业务要求对未完工的几十万甚至百万工单进行发短信提醒以及消息通知。所以每次查询需要将这海量数据查询出来。如果使用单线程&#xf…

前端 JS 实用操作总结

目录 1、重构解构 1、数组解构 2、对象解构 3、...展开 2、箭头函数 1、简写 2、this指向 3、没有arguments 4、普通函数this的指向 3、数组实用方法 1、map和filter 2、find 3、reduce 1、重构解构 1、数组解构 const arr ["唐僧", "孙悟空&quo…

传奇996_19——龙岭总结

功能: 切割 切割属性: 即人物属性,可以设置临时属性或者永久属性,龙岭使用的是临时属性,所谓临时就是存在有效期,龙岭设置的有效期是123456789秒,即1428.89802天。 龙岭写法(倒叙…

从0开始学习--Day26--聚类算法

无监督学习(Unsupervised learning and introduction) 监督学习问题的样本 无监督学习样本 如图,可以看到两者的区别在于无监督学习的样本是没有标签的,换言之就是无监督学习不会赋予主观上的判断,需要算法自己去探寻区别,第二张…

pytest在conftest.py中实现用例执行失败进行截图并附到allure测试报告

conftest.py文件简介 conftest.py文件用于定义共享设置、夹具和钩子函数。 可以跨.py文件调用,有多个.py文件调用时,可让conftest.py只调用了一次fixture,或调用多次fixture; conftest.py与运行的用例要在同一个pakage下&#xf…