如何设置链接的下载属性

<a>

download

<a>

download

<!-- 最简单的用法，浏览器会根据链接的URL自动命名文件 -->
<a href="/files/document.pdf" download>下载PDF文档</a>

<!-- 指定下载的文件名，这非常有用 -->
<a href="/files/image.jpg" download="我的照片.jpg">下载我的照片</a>

<!-- 即使文件类型浏览器通常会直接打开（如文本文件），download属性也会强制下载 -->
<a href="/files/report.txt" download="最新报告.txt">下载文本报告</a>

download

download

application/pdf

image/jpeg

download

<a>

download

download

download

Content-Disposition

Content-Disposition: attachment; filename="your-custom-name.pdf"

download

download

download

Content-Disposition

download

Blob

Blob

<a>

href

download

// 假设你有一个Canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 简单绘制一些内容
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = 'darkblue';
ctx.font = '20px Arial';
ctx.fillText('Hello Download!', 20, 50);

// 当用户点击一个按钮时触发下载
document.getElementById('downloadButton').addEventListener('click', () => {
    // 将Canvas内容转换为Blob对象
    canvas.toBlob((blob) => {
        // 创建一个临时的URL指向这个Blob
        const url = URL.createObjectURL(blob);

        // 创建一个临时的<a>元素
        const a = document.createElement('a');
        a.href = url;
        a.download = 'my_drawing.png'; // 设置下载的文件名

        // 模拟点击这个<a>元素来触发下载
        document.body.appendChild(a); // 某些浏览器需要将元素添加到DOM中才能触发点击
        a.click();
        document.body.removeChild(a); // 下载完成后移除临时元素

        // 释放URL对象，避免内存泄漏
        URL.revokeObjectURL(url);
    }, 'image/png'); // 指定MIME类型
});

canvas.toBlob()

Blob

URL.createObjectURL(blob)

Blob

URL.revokeObjectURL()

<a>

href

download

a.click()

new Blob([yourStringData], {type: 'text/plain'})

URL.createObjectURL

URL.revokeObjectURL