xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

HTML5 download 执行条件

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

image

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 发布文章使用：只允许注册用户才可以访问！

posted @ 2020-10-11 11:21  xgqfrms  阅读(379)  评论(3)    收藏  举报