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. rehash （重新散列）

    rehash - Redis 设计与实现 http://redisbook.com/preview/dict/rehashing.html

  2. 异步日志 Loguru

    https://mp.weixin.qq.com/s/hy68s610B9GbL_wgwTn7nA 更优美的python日志管理库Loguru Asynchronous, Thread-safe, M ...

  3. NOIP2020 移球游戏

    Description 给定 \(n+1\) 个栈,前 \(n\) 个栈内有不定的 \(m\) 个元素,最后一个栈为空,每个栈的最大容量为 \(m\) 每种颜色都有 \(m\) 种,求任意一种方法,使 ...

  4. mysql数据恢复：.frm和.ibd，恢复表结构和数据

    mysql数据恢复:.frm和.ibd,恢复表结构和数据 一.恢复表结构 二.恢复表数据 相关内容原文地址: CSDN:她说巷尾的樱花开了:mysql根据.frm和.ibd文件恢复表结构和数据 博客园 ...

  5. WAMP3.1.3自定义根目录

    1.首先找到httpd.conf 文件,搜索documentroot 修改前:DocumentRoot "${INSTALL_DIR}/www" <Directory &qu ...

  6. 封装验证blue事件插件

    (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = fa ...

  7. （31）grep命令详解：查找文件内容

    1.grep命令用于不需要列出文件的全部内容,而是从文件中找到包含指定信息的那些行. grep命令能够在一个或多个文件中,搜索某一特定的字符模式(也就是正则表达式),此模式可以是单一的字符.字符串.单 ...

  8. CyclicBarrier---可重用的循环栅栏

    很多文章只是提了下可重用,具体这个栅栏怎么可重用的,很多没有说明,这里会解开你的疑惑. CyclicBarrier是一个同步工具类,它允许一组线程互相等待,直到达到某个公共屏障点.与CountDown ...

  9. Java基础进阶

    Java基础进阶J Object类 hashcode() toString() clone() getClass() notify() wait() equals() Random类 生成 随机数 U ...

  10. CF Hello2020 D. New Year and Conference

    D. New Year and Conference 题意 有\(2n\)个区间,分别为\([sa_1,ea_1],[sb_1,eb_1],[sa_2,ea_2],[sb_2,eb_2],\cdots ...