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.rhkb.cn/news/473303.html

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

相关文章

Flink_DataStreamAPI_执行环境

DataStreamAPI_执行环境 1创建执行环境1.1getExecutionEnvironment1.2createLocalEnvironment1.3createRemoteEnvironment 2执行模式(Execution Mode)3触发程序执行 Flink程序可以在各种上下文环境中运行:我们可以在本地JVM中执行程序&#x…

鸿蒙中如何实现图片拉伸效果

2024年10月22日,华为发布会上,推出鸿蒙5.0。现在加入恰逢时机,你,我皆是鸿蒙时代合伙人。无论为了学习技术,还是为了谋福利,在鸿蒙的浩瀚海洋中分到一杯羹。现在学习鸿蒙正当时。 一文了解鸿蒙中图片拉伸的…

Unity 2022 Nav Mesh 自动寻路入门

untiy 2022 window-PackageManager-AINavigation 安装 Install 2.创建一个空物体命名Nav,在其自身挂载 NavMeshSurface 然后点击bake 烘焙地形即可 3.创建palyer和怪物 怪物AI代码 using System.Collections; using System.Collections.Generic; using UnityEngi…

基于gradio+networkx库对图结构进行可视化展示

前言 在gradio框架下对蛋白质-蛋白质相互作用网络(PPI网络)进行可视化,并将其在网页前端进行展示。 方法 其实很简单 可以直接使用networkx画图后保存图片,然后使用Gradio框架的image组件进行展示即可。 但实际上gradio还配置…

MSTP知识点

多生成树协议 在 MSTP(Multiple Spanning Tree Protocol)中,根桥(root)、指定端口(designated port)、备用端口(alternate port)等角色都是确保网络中没有循环并且流量能…

为正在运行的 Docker 容器重启策略,以提高服务的可用性

为正在运行的 Docker 容器重启策略,以提高服务的可用性。 为正在运行的 Docker 容器添加 --restartalways –restartalways 是 Docker 中一个常用的参数,用来设置容器的重启策略。它的作用是确保容器在一定条件下能够自动重启,以提高服务的可用性。 方…

后台管理系统(开箱即用)

很久没有更新博客了,给大家带上一波福利吧,大佬勿扰 现在市面上流行的后台管理模板很多,若依,芋道等,可是这些框架对我们来说可能会有点重,所以我自己从0到1写了一个后台管理模板,你们使用时候可扩展性也会更高 项目主要功能: 成员管理,部门管理&#…

Cursor安装Windows / Ubuntu

一、安装 1、下载软件 2、安装依赖 #安装fuse sudo apt-get install fuse3、将cursor添加到应用程序列表 sudo mv cursor-0.42.5x86_64.AppImage /opt/cursor.appimage #使用自己版本号替换 sudo chmod x /opt/cursor.appimage #给予可执行权限 sudo nano /usr/share/applic…

谷粒商城のRedisESRabbit MQ集群

文章目录 前言一、搭建Redis集群三、搭建ES集群三、搭建Rabbit MQ集群 前言 本篇是谷粒商城集群部署篇,搭建Redis、ES、Rabbit MQ集群实践的个人笔记,也是谷粒商城笔记的最后一篇。集群相关的理论性内容,会放在面试篇的笔记中。 一、搭建Redi…

孙赢利_11月17日_超分周报

一. 康佳PC端实现:1080 → 4K 实时超分 1. 将图像预处理操作从 CPU → GPU 运行 2. 后处理部分操作 从 CPU → GPU 运行 inference_realesrgan_Animal_Video.py import argparse import cv2 import glob import os from basicsr.archs.rrdbnet_arch import RRDBNe…

录的视频怎么消除杂音?从录制到后期的杂音消除攻略

在录制视频时,杂音往往是一个令人头疼的问题。无论是环境噪音、设备噪音还是电磁干扰,杂音的存在都会极大地影响视频的听觉体验。录的视频怎么消除杂音?通过一些前期准备和后期处理技巧,我们可以有效地消除这些杂音,提…

论文《基于现实迷宫地形的电脑鼠设计》深度分析——智能车驱动算法

论文概述 《基于现实迷宫地形的电脑鼠设计》是由吴润强、庹忠曜、刘文杰、项璟晨、孙科学等人于2023年发表的一篇优秀期刊论文。其针对现阶段电脑鼠计算量庞大且不适用于现实迷宫地形的问题,特基于超声波测距与传统迷宫算法原理,设计出一款可在现实迷宫地…

算法日记 26-27day 贪心算法

接下来的题目有些地方比较相似。需要注意多个条件。 题目:分发糖果 135. 分发糖果 - 力扣(LeetCode) n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求,给这些孩子分发糖果: 每…

vue3点击按钮el-dialog对话框不显示问题

vue3弹框不显示问题,控制台也没报错 把 append-to-body:visible.sync"previewDialogOpen" 改为 append-to-bodyv-model"previewDialogOpen" 就好了。

wordpress使用相关

这里写目录标题 遇到的相关问题WordPress安装插件过程中遇到需要ftp出现确实XMLReader 插件的提示cURL Support Missing(curl 缺失) 遇到的相关问题 WordPress安装插件过程中遇到需要ftp 一般在这个位置 出现确实XMLReader 插件的提示 解决&#xff1a…

21.3D surface

3D surface """ File : 05-decoding-Major Name : 3d_surface.py Author : lyq Date : 2024/11/16 23:10 Envi : PyCharm Description: files details """ import numpy as np import matplotlib.pyplot as plt# 设置全局默认字体…

ARM(安谋) China处理器

0 Preface/Foreword 0.1 参考博客 Cortex-M23/M33与STAR-MC1星辰处理器 ARM China,2018年4月established,独立运行。 1 处理器类型 1.1 周易AIPU 1.2 STAR-MC1(星辰处理器) STAT-MC1,主要为满足AIOT应用性能、功…

windows C#-异步编程概述(二)

不要阻塞,而要等待 上述代码演示了一种不好的做法:构建同步代码来执行异步操作。正如所写,此代码会阻止执行它的线程执行任何其他工作。在任何任务正在进行时,它都不会被中断。这就像你把面包放进去后盯着烤面包机一样。你会忽略…

【Android原生问题分析】夸克、抖音划动无响应问题【Android14】

1 问题描述 偶现问题,用户打开夸克、抖音后,在界面上划动无响应,但是没有ANR。回到Launcher后再次打开夸克/抖音,发现App的界面发生了变化,但是仍然是划不动的。 2 log初分析 复现问题附近的log为: 用户…

【STM32】MPU6050简介

文章目录 MPU6050简介MPU6050关键块带有16位ADC和信号调理的三轴MEMS陀螺仪具有16位ADC和信号调理的三轴MEMS加速度计I2C串行通信接口 MPU6050对应的数据手册:MPU6050 陀螺仪加速度计 链接: https://pan.baidu.com/s/13nwEhGvsfxx0euR2hMHsyw?pwdv2i6 提取码: v2i6…