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来实现的,代码如下:

js 复制代码
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等等等等

相关推荐
一秒美工助手1 分钟前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
桑榆肖物1 小时前
将 .NET Aspire 添加到现有应用:前端 JavaScript 项目处理
前端·javascript·.net
Wh1teR0se3 小时前
[极客大挑战 2019]Secret File--详细解析
前端·web安全·网络安全
ZhaiMou4 小时前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
code_shenbing7 小时前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
NightCyberpunk7 小时前
JavaScript学习笔记
javascript·笔记·学习
白臻7 小时前
使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题
前端·vue.js·elementui
北极糊的狐8 小时前
vue使用List.forEach遍历集合元素
前端·javascript·vue.js
晓看天色*8 小时前
[JAVA]MyBatis框架—获取SqlSession对象
java·开发语言·前端
老码沉思录8 小时前
React Native 全栈开发实战班 - 性能与调试之内存管理
javascript·react native·react.js