HTML5 download 执行条件

  1. 同一个域名下的资源

  2. http only

  3. 绝对路径/相对路径 都可以

demo

https://cdn.xgqfrms.xyz/

https://cdn.xgqfrms.xyz/HTML5/auto-dwonload-images/index.html

  1. 跨域的第三方资源，会直接跳转到第三方资源连接

  2. file:///Users/xgqfrms-mbp/Documents/GitHub/cdn/html5/download/image-auto-downloader.html 不好使，会直接打开连接

<!DOCTYPE html>

<html lang="zh-Hans">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="author" content="xgqfrms">

  <meta name="generator" content="VS code">

  <title>image auto downloader</title>

  <style>

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

  </style>

  <!-- <link rel="stylesheet" href="./index.css"> -->

</head>

<body>

  <header>

    <h1>image auto downloader</h1>

  </header>

  <main>

    <!--  -->

    <a href="https://cdn.xgqfrms.xyz/logo/icon.png" download="">https://cdn.xgqfrms.xyz/logo/icon.png</a>

    <a href="../../../logo/icon.png" download="">../../../logo/icon.png</a>

    <!-- http only??? -->

    <a href="https://dn-simplecloud.shiyanlou.com/1487741005890.png" download >image auto downloader</a>

    <a href="https://dn-simplecloud.shiyanlou.com/1487741005890.png" download="" style="visibility: hidden;">image auto downloader</a>

    <a href="https://dn-simplecloud.shiyanlou.com/1487741005890.png" download="" style="display: none;">image auto downloader</a>

    <div>

      <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows" download="shortcuts-zh.pdf">download pdf</a>

      <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf" download="shortcuts-zh.pdf">download pdf</a>

    </div>

  </main>

  <footer>

    <p>copyright&copy; xgqfrms 2020</p>

  </footer>

  <!-- js -->

  <script>

    const log = console.log;

  </script>

</body>

</html>




"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-10-01

 * @modified

 *

 * @description image auto downloader

 * @difficulty Easy Medium Hard

 * @complexity O(n)

 * @augments

 * @example

 * @link

 * @solutions

 *

 * @best_solutions

 *

 */

const log = console.log;

let divs = [...document.querySelectorAll(`.learn-path-item`)];

for (let i = 0; i < divs.length; i++) {

  const div = divs[i];

  const img = div.firstElementChild;

  // log(`img src =`, img.src);

  // window.open(img.src);

  autoDownloader(img.src, 1000);

}

const autoDownloader = (url = ``, timer = 0) => {

  const body = document.querySelector(`body`);

  const a = document.createElement(`a`);

  //  only read property

  // a.src = url;

  //

  a.setAttribute(`href`, url);

  // a.setAttribute(`src`, url);

  // VM17:9 Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.

  // a.setAttribute(`download`);

  a.setAttribute(`download`, true);

  // a.setAttribute(`download`, ``);

  // a.setAttribute(`style`, `display:none;`);

  // a.setAttribute(`style`, `visibility: hidden;`);

  body.insertAdjacentElement(`beforeend`, a);

  // body.insertAdjacentHTML(``);

  // a.addEventListener(`click`, (e) => {

  //   e.preventDefault();

  // });

  a.click();

  // a.click();

  setTimeout(() => {

    // DOM remove

    body.removeChild(a);

    // a.remove();

    // delete a;

  }, timer);

}

// Downloader(`https://dn-simplecloud.shiyanlou.com/1487741005890.png`, 1000)

/*

const divs = [...document.querySelectorAll(`a`)];

for (let i = 0; i < divs.length; i++) {

  const div = divs[i];

  autoDownloader(div.href, 1000);

}

*/

same origin

download only works for same-origin URLs, or the blob: and data: schemes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

https://caniuse.com/?search=download

https://stackoverflow.com/questions/49760160/a-download-attribute-not-working-anymore

blob

var funDownload = function (content, filename) {

    // 创建隐藏的可下载链接

    var eleLink = document.createElement('a');

    eleLink.download = filename;

    eleLink.style.display = 'none';

    // 字符内容转变成blob地址

    var blob = new Blob([content]);

    eleLink.href = URL.createObjectURL(blob);

    // 触发点击

    document.body.appendChild(eleLink);

    eleLink.click();

    // 然后移除

    document.body.removeChild(eleLink);

};

https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

https://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/

refs

https://github.com/xgqfrms/HTML5/issues/11#issuecomment-706642998

test

https://www.lanqiao.cn/paths/

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

HTML5 download 执行条件的更多相关文章

  1. html5 download all in one

    html5 download all in one HTML5 download & Fetch API & File API & Blob https://scarletsk ...

  2. html5 download blob

    html5 download blob https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-li ...

  3. DEVOPS技术实践_23：判断文件下载成功作为执行条件

    在实际生产中,我们经常会需要通过判断一个结果作为一个条件去执行另一个内容,比如判断一个文件是否存在,判官一个命令是否执行成功等等 现在我们选择其中一个场景进行实验,当某个目录下存在,则执行操作 1. ...

  4. 利用CodeDom 动态执行条件表达式

       在实际需求遇到需要根据不同条件,去指定不同的不同的审批人.起初的需求倒很简单,明确是当金额 >=500000 , 可变的就是500000这个数额. 当时为了防止可能产生的变化.特意搞了 条 ...

  5. rander()函数执行条件

    调用this.setState({}),如果数据改变了,rander()就行执行

  6. 公用表表达式(CTE)引发的改变执行顺序同WHERE条件顺序引发的bug

    以下模拟一下CTE出错 /*测试环境 Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) Apr 2 2010 15:48:46 Copyr ...

  7. ARM指令集——条件执行、内存操作指令、跳转指令

    ARM 汇编指令条件执行 在ARM模式下,任何一条数据处理指令可以选择是否根据操作的结果来更新CPSR寄存器中的ALU状态标志位.在数据处理指令中使用S后缀来实现该功能. 不要在CMP,CMN,TST ...

  8. 「译」JUnit 5 系列：条件测试

    原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...

  9. Bash条件判断

    bash编程之:条件判断,判定后续操作的前提条件是否满足, bash编程之: 条件判断常用类型: 整数测试:比较两个整数谁大谁小,是否相等: 二元测试: num1 操作符 num2 -eq: 等于 - ...

随机推荐

  1. RPC 接口必须是业务职责

    https://mp.weixin.qq.com/s/MYSF8lCF92ItG_Lc8nOspg 一个加班多新人多团队,我们的代码问题与重构 陈于喆 高可用架构 2020-10-21   微服务编码 ...

  2. Spring Cloud 2020.0.1 正式发布！真是头疼。。。

    上一篇:Spring Cloud 2020.0.0 正式发布,全新颠覆性版本! 号外!号外!号外! Spring Cloud 2020.0.0 在去年 12 月底,赶在一年的尾巴最后几天仓促发布了,时 ...

  3. P5518 [MtOI2019]幽灵乐团 / 莫比乌斯反演基础练习题

    瞎扯 建议在阅读题解之前欣赏这首由普莉兹姆利巴姐妹带来的的合奏. Q:你参加省选吗?不是说好了考完 NOIP 就退吗. A:对啊. Q:那你学这玩意干啥? A:对啊,我学这玩意干啥? 写这题的动机? ...

  4. 在 ASP.NET Core 应用中使用 Cookie 进行身份认证

    Overview 身份认证是网站最基本的功能,最近因为业务部门的一个需求,需要对一个已经存在很久的小工具网站进行改造,因为在逐步的将一些离散的系统迁移至 .NET Core,所以趁这个机会将这个老的 ...

  5. 码一次前后台post请求交互，以及接口的使用，json数据格式的传递

    近几天,公司疯狂加班,然后补做了很多功能,很多东西虽然是自己熟悉的,但是却不会上手,动手实践能力仍需加强,对此对一些代码记录,留待学习和总结. 简单描述功能 具体实现 前台JSP.JS.后台actio ...

  6. Spring Boot的进阶和高级

    一.Repository接口 二.Repository子接口 三.@Query注解 四.更新及删除操作整合事物 五.CrudRepository接口 六.PagingAndSortingReposit ...

  7. css按钮样式

    style='height:22px;padding:1 17px;font-size: 8px;font-weight: 100;line-height: 25px;'http://www.boot ...

  8. Python爬虫笔记一（来自MOOC） Requests库入门

    Python爬虫笔记一(来自MOOC) 提示:本文是我在中国大学MOOC里面自学以及敲的一部分代码,纯一个记录文,如果刚好有人也是看的这个课,方便搬运在自己电脑上运行. 课程为:北京理工大学-嵩天-P ...

  9. D - D （畅通工程再续）

    相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题,政 ...

  10. HDU - 3613 Best Reward（manacher或拓展kmp）

    传送门:HDU - 3613 题意:给出26个字母的价值,然后给你一个字符串,把它分成两个字符串,字符串是回文串才算价值,求价值最大是多少. 题解:这个题可以用马拉车,也可以用拓展kmp. ①Mana ...