oss pdf浏览器直接下载_如何使 pdf 文件在浏览器里面直接下载而不是打开

前言

在做需求过程中我们大概率会遇到在浏览器中下载文件的需求，如果仅仅是这个要求的话很简单，有如下两种解决方式。

第一种是通过 window 对象的 open 方法进行操作，将文件 url 直接在浏览器中打开即可下载。

window.open('url')

第二种是通过 a 标签，设置 href 为 url 值，点击 a 标签即可完成下载。

但是上面两种文件下载方式都会存在一个问题，就是 pdf 文件会直接在浏览器中打开而不是直接下载，效果如下：

解决方案

这种需求的解决方式就是将PDF文件的 MIME type 改为 application/octet-stream 并加入 Content-Disposition:attachment header，原本的 pdf 文件 MIME type 为 application/pdf，浏览器识别到这个 type 之后会自动在浏览器打开，所以说我们在这里修改 type 即可。

修改的方法有两种，一种是在后端进行修改，上传文件或者返回文件的时候进行操作，但是绝大多数情况下文件都是存储到 cdn 服务器中的，后端也不方便对其进行操作，这个时候就需要前端来修改了。

处理代码如下：

/**

* @deprecated 下载文件

* @param {string} url

* @param {string} filename

handleFileDownload = (url, filename) => {

// 创建 a 标签

let a = document.createElement('a');

a.href = url;

a.download = filename;

a.click();

}

/**

* @deprecated 处理 pdf url，使其不在浏览器打开

* @param {string} url

handlePdfLink = (url, filename) => {

fetch(url, {

method: 'get',

responseType: 'arraybuffer',

})

.then(function (res) {

if (res.status !== 200) {

return res.json()

}

return res.arrayBuffer()

})

.then((blobRes) => {

// 生成 Blob 对象，设置 type 等信息

const e = new Blob([blobRes], {

type: 'application/octet-stream',

'Content-Disposition':'attachment'

})

// 将 Blob 对象转为 url

const link = window.URL.createObjectURL(e)

handleFileDownload(link, filename)

}).catch(err => {

console.error(err)

})

}

这样修改修改代码的话就可以实现在浏览器中下载。效果如下

oss pdf浏览器直接下载_如何使 pdf 文件在浏览器里面直接下载而不是打开相关推荐

java byte 图片浏览器直接显示_以Spring Boot的方式显示图片或下载文件到浏览器的示例代码...
以Java web的方式显示图片到浏览器以Java web的方式下载服务器文件到浏览器以Spring Boot的方式显示图片或下载文件到浏览器请求例子:http://localhost:8080/ ...
angular2代理不可用_如何使任何文件在Angular中公开可用
angular2代理不可用 Sometimes we need to make some files available publicly so that you can access those o ...
中批注转成pdf看不到_超实用的PDF在线转换器，你绝对用的到~
PDF 是我们工作中常用的文档形式,有时候需要对它进行转换或者编辑等工作. 给大家分享一款界面简洁,操作简单的一站式 PDF 工具:LightPDF.LightPDF 是一款线上 PDF 转换器与编辑 ...
uc下载php怎么打开网页,php让浏览器下载txt等类型的文件 uc浏览器导入txt 浏览器打开txt 360极速浏览器规则tx...
如果让浏览器访问一个txt文件,会发生什么呢?比如访问localhost/test/test.txt,浏览器会直接把TXT文件的内容直接显示在浏览器上,而不是下载下来. 但是也不是所有的文件都会被直 ...
pdf线条粗细设置_如何调整pdf线条粗细
当我们发现pdf文件打印后的线条很模糊的时候,首先想到的就是调整pdf线条的粗细.可是pdf线条粗细怎么调整呢?下面小编就给大家分享一个如何调整pdf线条粗细的技巧!希望对大家有所帮助. 软件名称:迅 ...
hive时空链战_时空链战Chain Strike游戏电脑版下载_时空链战Chain Strike最新电脑版下载_18183手机游戏下载...
时空链战Chain Strike电脑版下载拥有丰富的玩法模式任你选择,让你的游戏过程更加的精彩! <时空链战>(Chain Strike)由韩国游戏商Com2uS研发制作,故事讲述了男主角 ...
安装浏览器增强组件_福昕PDF阅读器 Foxit Reader v10.0.1.358 去广告增强优化版
前段时间为大家分享过福昕PDF编辑器(Foxit)高级版 v.9.7版本,想必很多用户应该已经安装使用一段时间了! 点击此处: 福昕PDF编辑器(Foxit)去广告增强优化 v.9.7 本次小编将为 ...
安装浏览器增强组件_福昕PDF阅读器优化增强版
我的工作要经常会用到PDF类型的文件,所以各种的PDF阅读器也是用了个遍.但是用下来也就福昕阅读器用起来是比较舒服的,但是新版本的广告略多,而且不必要的功能也不少.所以在网上找了个优化增强版用起来还算 ...
qq流浏览器网页版_如何使QQ浏览器浏览简洁
文章短不过也算是有用吧,主要是给出一些尽量避免注意力转移的建议. ------ 作为大王卡用户,确实是没办法才开始用QQ浏览器的,不过这个还可以,然后也慢慢摸索一些操作方法. 其实到了有WiFi的地方 ...

oss pdf浏览器直接下载_如何使 pdf 文件在浏览器里面直接下载而不是打开

oss pdf浏览器直接下载_如何使 pdf 文件在浏览器里面直接下载而不是打开相关推荐

最新文章

热门文章