资讯专栏INFORMATION COLUMN

download使用浅析

dingding199389 / 2150人阅读

摘要:先来介绍一下我们的主角让我们有一个简单认识图中我们可以看到标签的属性,他是用来指定可以下载,值是。这样的下载需要后端人员配合,这咔咔咔就改代码。跨域情况,里面设置不好使测试地址同上。这样写成一个可以让我们不用界面上放一个标签,换成触发。

先来介绍一下我们的主角download让我们有一个简单认识,图中我们可以看到a标签的download属性,他是用来指定可以下载,值是filename。图片来源

再来说说场景,网页上要下载东西,下载一个资源(软件.exe 、 压缩包.zip 、 图片.png 、 本文.txt ),我们通过url打开,发现有的可以下载,有的直接显示了,这就有点尴尬了。先说说为什么有的资源就直接显示了。这是因为浏览器发现他可以自己打开了,所以他就觉得他要显示比如你的 .png .txt .html。那如果我们要下载怎么办?

这种东西呢,一般就两个办法,一个前端控制,一个后端控制。

后端控制 新给你一个url,加个下载头。浏览器一看,哎呦这个东西是要下载的,不需要打开,他就直接下载了。这样的下载需要后端人员配合,这咔咔咔就改代码。

前端控制 a标签的Download属性,加上以后,就是下载资源,这个好,想下载什么下载什么,但是呢,这种好用的东西在前端一般都有问题,什么问题?兼容问题呗,FF不支持跨域下载,非跨域下是可以下载的-测试地址。跨域情况,chrome里面设置filename不好使-测试地址同上。当然,还有我们要兼容的ie。

//这样写成一个function可以让我们不用界面上放一个a标签,换成js触发。
a = document.createElement("a");
a.download = filename;
a.href = "https://segmentfault.com";
// 触发点击
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92009.html

相关文章

  • 浅析微信支付:支付验收示例和验收指引

    摘要:本文是浅析微信支付系列文章的第十一篇,主要讲解支付验收示例和验收指引。为保证商户接入质量,提升交易安全及用户体验,微信支付的合作服务商在正式上线交易前,必须先根据本文指引完成验收。 本文是【浅析微信支付】系列文章的第十一篇,主要讲解支付验收示例和验收指引。 浅析微信支付系列已经更新十一篇了哟~,没有看过的朋友们可以看一下。 浅析微信支付:如何使用沙箱环境测试 浅析微信支付:下载对账单...

    Cympros 评论0 收藏0
  • 前端培训-初级阶段-场景实战(2019-06-06)-下载文件&下载进度

    摘要:前端最基础的就是。一个朋友的问题,监测下载进度。这节主要是讲如何使用,以及前端下载的核心操作。下载文件,并显示进度条。下载文件,并显示进度条下载文件上面已经实现了,那我们先说说如何显示进度条。实现代码如下,我们操作成读流,然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(H...

    sPeng 评论0 收藏0
  • 前端培训-初级阶段-场景实战(2019-06-06)-下载文件&下载进度

    摘要:前端最基础的就是。一个朋友的问题,监测下载进度。这节主要是讲如何使用,以及前端下载的核心操作。下载文件,并显示进度条。下载文件,并显示进度条下载文件上面已经实现了,那我们先说说如何显示进度条。实现代码如下,我们操作成读流,然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(H...

    freecode 评论0 收藏0

发表评论

0条评论

dingding199389

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<