HTML5 download 执行条件
HTML5 download 执行条件
-
同一个域名下的资源
-
http only
-
绝对路径/相对路径 都可以
demo
https://cdn.xgqfrms.xyz/HTML5/auto-dwonload-images/index.html
-
跨域的第三方资源,会直接跳转到第三方资源连接
-
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© 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
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13794029.html
未经授权禁止转载,违者必究!