前端各类文件下载问题

一、 通过a标签的download属性进行下载

a标签的href指定下载文件地址;download可用于修改下载文件名,不指定就用默认文件名;

  • a标签download属性在用于同源文件下载的时候,没有任何问题;表现行为都是下载文件
  • a标签在下载第三方资源(非同源)文件,download属性会根据浏览器对文件的支持而表现出不同。浏览器默认支持txt,json,pdf,image等文件,此时会直接预览打开,而不是下载。而对于不支持的文件,会直接下载,比如zip,xlsx,word.
<!-- a链接下载,同源download属性没有任何问题,默认都是下载文件; download="fileName" 不指定,默认就是当前资源文件名-->
   <a href="./assets/note.txt" download="载txt">下载txt</a>
   <a href="./assets/info.json" download="下载JSON">下载JSON</a>
   <a href="./assets/avatar.jpg" download="下载png图片">下载png图片</a>
   <a href="./assets/avatar.zip" download="下载zip压缩包">下载zip压缩包</a>
   <a href="./assets/markdown.md" download="下载markdown文件">下载markdown文件</a>

   <a href="./assets/JavaScript高级程序设计(第4版 中文高清).pdf" download="下载PDF">下载PDF</a>
   <a href="./assets/销售统计表.xlsx" download>下载Excel</a>
   <a href="./assets/毕业论文.docx" download>下载Word</a>
   <a href="./assets/述职报告.pptx" download>下载PPT</a>


  <!-- 
    浏览器默认支持txt,json,markdown,pdf,image(png等)等文件的预览,如果是第三方资源,且不同源,此时a标签download的下载功能会失效;
   -->
   <a href="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" download>下载第三方PDF文档</a>
   <a href="https://tse2-mm.cn.bing.net/th/id/OIP-C.D3eZ5Niid-sAEK0DHvSZPAHaKr?pid=ImgDet&rs=1" download>下载第三方图片</a>

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值