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. （012）每日SQL学习：TO_CHAR(DATE,FORMAT)

    SYSDATE 2009-6-16 15:25:10 TRUNC(SYSDATE) 2009-6-16 TO_CHAR(SYSDATE,'YYYYMMDD') 20090616 到日 TO_CHAR( ...

  2. WireShark 之 text2pcap

    前言 本来想用 010Editer 的,看到破解教程头都大了,那么就用 WireShark 的 Text2pcap 吧! 正文 打开CMD控制台窗口,转到WireShark安装目录 ,此处可以shif ...

  3. JavaScript基础知识-基本概念

    typeof操作符 typeof 操作符返回一个字符串,表示未经计算的操作数的类型. // 数值 typeof 37 === 'number'; typeof 3.14 === 'number'; t ...

  4. 基于粒子群算法的分组背包MATLAB实现

    抽空看了一段时间的粒子群算法,这里仅针对其应用于动态规划中的背包问题的情况做下总结归纳,其他应用可以之后想到了再添加. 一:分组背包问题简介 假设有3个组,每组有2个物品,每种物品有3种属性,价值.体 ...

  5. 六：SpringBoot-集成Druid连接池，配置监控界面

    SpringBoot-集成Druid连接池,配置监控界面 1.Druid连接池 1.1 Druid特点 2.SpringBoot整合Druid 2.1 引入核心依赖 2.2 数据源配置文件 2.3 核 ...

  6. Django（图书管理系统）

    图书管理系统 注意事项 1.models 要创建好,规划好自己的表,以及各种表关系 2.url正则要写好 3.settings的配置 4.利用bootstarp 进行布局更漂亮哦 5.注意orm  各 ...

  7. linux设置用户登录提示

    1./etc/motd文件的用途          /etc/motd即message of today(布告栏信息),每次用户登录时,/etc/motd文件的内容会显示在用户的终端.         ...

  8. java调用shell脚本执行操作

    //定时清空 日志 String shellString = "sh /home/jyapp/delete_log.sh"; Process process = Runtime.g ...

  9. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  10. thymeleaf第一篇：什么是-->为什么要使用-->有啥好处这玩意

    Thymeleaf3.0版本官方地址 1 Introducing Thymeleaf Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP . ...