`<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属性

使用download属性将<canvas>下载保存为png

`<a>`标签的download属性

使用download属性将`<canvas>`下载保存为png

一些低调的HTML属性 #81

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions