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. 为失败设计，大量引入对SRE的理解，鲁棒性高

    https://go-kratos.dev/#/ Principles 简单:不过度设计,代码平实简单 通用:通用业务开发所需要的基础库的功能 高效:提高业务迭代的效率 稳定:基础库可测试性高,覆盖率 ...

  2. http://golang.org/s/better-linker

    http://golang.org/s/better-linker The original linker was also simpler than it is now and its implem ...

  3. 「笔记」AC 自动机

    目录 写在前面 定义 引入 构造 暴力 字典图优化 匹配 在线 离线 复杂度 完整代码 例题 P3796 [模板]AC 自动机(加强版) P3808 [模板]AC 自动机(简单版) 「JSOI2007 ...

  4. MySql数据表设计，索引优化，SQL优化，其他数据库

    MySql数据表设计,索引优化,SQL优化,其他数据库 1.数据表设计 1.1数据类型 1.2避免空值 1.3text类型优化 2.索引优化 2.1索引分类 2.2索引优化 3.SQL优化 3.1分批 ...

  5. swap交换2变量

    #define swap(x,y) {(x)=(x)+(y); (y)=(x)-(y); (x)=(x)-(y);} void swap(int i, int offset){ int temp; t ...

  6. shell（shell变量、条件表达式、流程控制）

    本章内容: 变量 运算 if语句 for语句 while语句 break.continue 实例 shell变量 1.shell变量简介 变量是任何一种编程语言都必不可少的组成部分,变量用来存放各种数 ...

  7. UML——宏观总结

    今天果断开始UML的学习,要不就要被12期赶超了.努力学习的效率 一.宏观导图把控 导图概要说明:RUP这块儿的内容相当于软件工程已经学过了,只不过这里换了个名词而已.面向对象,已经不再陌生,vb中早 ...

  8. BGP总结（三）

    3.BGP路由汇总 在大规模的网络中,BGP路由表十分庞大,给设备造成了很大的负担,同时使发生路由振荡的几率也大大增加,影响网络的稳定性.路由聚合是将多条路由合并的机制,它通过只向对等体发送聚合后的路 ...

  9. Flink-v1.12官方网站翻译-P019-Generating Watermarks

    生成水印 在本节中,您将了解 Flink 提供的 API,用于处理事件时间时间戳和水印.关于事件时间.处理时间和摄取时间的介绍,请参考事件时间的介绍. 水印策略介绍 为了使用事件时间,Flink需要知 ...

  10. DICOM医学文件的解析

    最近导师一直让做智慧医疗的一个项目,这里面涉及到DICOM格式的文件处理,在这里分享一下自己学到的关于DCM文件的一些内容. DICOM DICOM(DigitalImaging andCommuni ...