FrankKai
commented
6 years ago <a>标签的download属性
这个属性可以叫浏览器下载一个URL，而不是导航，所以用户将被提示"下载一个本地文件"。如果属性有值，在Save提示时它将有一个预填充的文件名。（如果他们愿意用户可以改变文件名）。值没有严格限制，即使是/ 和 \也会被转换成下划线。大多数的文件系统对文件名做了一些限制，浏览器将根据具体情况做出调整。 注意: 这个属性紧仅仅用于same-origin URL。 尽管HTTP(s) URL需要在同源，blob: URLs 和data: URLs允许由js生成的内容，例如一个图片编辑器web应用中创建的图片，可以被下载。 如果HTTP报文头 Content-Disposition ：提供与此属性不同的文件名，HTTP标头优先于此属性。 如果Content-Disposition：设置为inline时，Firefox优先考虑Content-Disposition，例如文件名大小写，Chrome优先考虑下载属性。
- a标签download属性，从后往前匹配第一个.作为文件格式。
若是
download='foobarbaz.bat.png'，文件格式为.png；若是download='foobarbaz.bat'，文件格式为.bat。 - a标签的download属性值，若没有指明文件名，会以href中的文件格式进行匹配。
例如base64格式的
data:image/png;，生成的文件格式为png格式。
使用download属性将<canvas>下载保存为png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>a标签的download属性可以将canvas保存为png。</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #c0ffee
}
canvas {
background: #fff;
}
a {
background: #69c;
color: #fff;
padding: 5px 10px;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// grab the canvas element, get the context for API access and
// preset some variables
var canvas = document.querySelector('canvas'),
c = canvas.getContext('2d'),
mouseX = 0,
mouseY = 0,
width = 300,
height = 300,
colour = 'hotpink',
mousedown = false;
// resize the canvas
canvas.width = width;
canvas.height = height;
function draw() {
if (mousedown) {
// set the colour
c.fillStyle = colour;
// start a path and paint a circle of 20 pixels at the mouse position
c.beginPath();
c.arc(mouseX, mouseY, 10, 0, Math.PI * 2, true);
c.closePath();
c.fill();
}
}
// get the mouse position on the canvas (some browser trickery involved)
canvas.addEventListener('mousemove', function (event) {
if (event.offsetX) {
mouseX = event.offsetX;
mouseY = event.offsetY;
} else {
mouseX = event.pageX - event.target.offsetLeft;
mouseY = event.pageY - event.target.offsetTop;
}
// call the draw function
draw();
}, false);
canvas.addEventListener('mousedown', function (event) {
mousedown = true;
}, false);
canvas.addEventListener('mouseup', function (event) {
mousedown = false;
}, false);
var link = document.createElement('a');
link.innerHTML = '下载图片';
link.addEventListener('click', function (ev) {
link.href = canvas.toDataURL();
link.download = "a标签神奇的download属性.png";
}, false);
document.body.appendChild(link);
</script>
</body>
</html>
<a>标签的download属性<input>的accept属性<img>的onerror属性<div>的tabindex属性<script>的async属性和defer属性<link>的preload属性<img>的fetchpriority属性