【思路】关于前端下载的时候chrome会直接打开文件的问题

发表于 2016-12-13 12:11 显示全部楼层 19 2135

问题:你到底是想让你自己的Chrome直接下载PDF,还是想让你的服务器上的PDFChrome直接下载?

如果是前者,你可以打开Chrome插件设置页面chrome://plugins/,停用其中的“Chrome PDF Viewer”插件,这样你的Chrome就会直接下载所有PDF文件了。

后者的话,我们又可以分两种情况:

1)自己已经有文件的存放路径了,要放到页面上直接点击下载的(固定形式),如下图

QQ图片20161213121007.png

这种下载一般都是固定的地址的,所以可以直接在这个a链接写就可以了<a href="downloadUrl" download></a>;  (这个是html5的属性,注意兼容性问题);  


2)链接下载地址是没有固定的,根据用户操作了之后再生成链接,如这个星期我在做下载功能的时候,下载的psd的时候chrome是可以直接打开的,所以导致下载了之后浏览器直接打开pdf,而不是下载,这个时候我们就可以在请求到下载地址之后呢就js生成一个a链接在body,然后在模拟点击它,这样就可以实现点击下载后是下载文件,而不是打开浏览器支持直接打开的文件类型的文件了.

$('body').append('<a href="http://tuxi.howdata.cn/'+ data.filename+'" download id="downloadDoc" style="display:none;"></a>')                   //生成a链接
$('#downloadDoc')[0].click();    
//因为click()是原生js的事件,跟jquery不能一起使用,所以在在dom选择上转成了原生方法[0]
                                                 
$('#downloadDoc').remove();       //移除a链接,用户没刷新页的情况下可下次下载,不然会发生冲突了


回复 使用道具
举报
认真的屎迪仔

发表于 2017-02-13 06:28 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
我很认真的说

发表于 2017-02-13 03:22 显示全部楼层

回复 支持 反对 使用道具
举报
pcatzj

发表于 2017-02-13 02:17 显示全部楼层

回复 支持 反对 使用道具
举报
我很认真的说

发表于 2017-02-13 01:49 显示全部楼层

回复 支持 反对 使用道具
举报
杨楷

发表于 2017-02-12 23:33 显示全部楼层

回复 支持 反对 使用道具
举报
宁静致远

发表于 2017-02-12 21:54 显示全部楼层

回复 支持 反对 使用道具
举报
PPAP

发表于 2017-02-12 21:15 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
淡蓝心情

发表于 2017-02-12 20:36 显示全部楼层

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 2017-02-11 21:18 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
大版主

超级版主

200

学分

6894

学币

8371

积分

超级版主

Rank: 8Rank: 8

积分
8371

签到之王勋章关注叩丁狼教育公众号关注新浪微博叩丁狼一周年勋章活动达人勋章叩丁狼版主勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章叩丁狼网页UI学员勋章论坛百帖达成勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章签到超新星勋章叩丁狼周年庆杯子叩丁狼周年庆纪念勋章叩丁狼周年庆手机壳叩丁狼周年庆鼠标垫叩丁狼周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注叩丁狼教育