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. 重磅：保姆级Java技术图谱发布！够学到元宵节了，赶紧收藏！

    最近因为参与社群交流的时间比较多,除了唠唠白酒的嗑之外,很大一部分时间都是看到群里问到一些关于Spring Boot和Spring Cloud应用过程中碰到的问题以及一些开发过程中的报错信息.在这些帮 ...

  2. 1、剑指offer-数组——二维数组中的查找

    *题目描述* **在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含 ...

  3. Optimal asymmetric encryption padding 最优非对称加密填充(OAEP)

    SubtleCrypto.decrypt() - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypt ...

  4. Transformation-Based Error-Driven Learning and Natural Language Processing: A Case Study in Part-of-Speech Tagging

    http://delivery.acm.org/10.1145/220000/218367/p543-brill.pdf?ip=116.30.5.154&id=218367&acc=O ...

  5. 十四：SpringBoot-配置MongoDB数据库，实现增删改查逻辑

    SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...

  6. Nginx基本功能及其原理，配置原理

    Nginx基本功能及其原理,配置原理 一.正向代理.反向代理 二.Nginx配置文件的整体结构 三.Nginx配置SSL及HTTP跳转到HTTPS 四.nginx 配置管理 [nginx.conf 基 ...

  7. jquery的ajax发送请求后前端不能实时更新

    在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱(比如说多次请求却没有响应). 错误代码如下: $.get("fetch.php") .done(f ...

  8. mysql高级day3

    Mysql高级-day03 1. 应用优化 前面章节,我们介绍了很多数据库的优化措施.但是在实际生产环境中,由于数据库本身的性能局限,就必须要对前台的应用进行一些优化,来降低数据库的访问压力. 1.1 ...

  9. Jenkins（1）安装

    前言 jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境. 环境准备: mac/Linux docker docker拉去jenkins镜像 先下载jenkins镜 ...

  10. JDK中jps、jinfo、jstat、jstack、jmap、jconsole等命令简介

    JDK提供了几个很实用的工具,如下: jinfo:观察运行中的java程序的运行环境参数:参数包括Java System属性和JVM命令行参数,java class path等信息.命令格式:jinf ...