HTML下载属性使用教程

本篇文章给大家分享《download属性用于指定浏览器下载链接文件而不是直接打开。要强制下载，可在链接中添加`download`属性并设置文件名。》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

使用 标签的 download 属性可直接触发下载并指定文件名，如 ；2. 对于不支持 download 属性的老旧浏览器，可通过后端设置 Content-Disposition: attachment 响应头强制下载；3. download 属性在跨域资源上可能因安全限制失效，需服务器配置 CORS 头部或使用 fetch API 获取 Blob 后创建临时下载链接，通过 JavaScript 模拟点击完成下载并释放 URL，以解决跨域问题。

download 属性用于指定浏览器下载链接指向的资源，而不是导航到该资源。它可以直接触发下载，并且可以指定下载文件的名称。

解决方案：

使用 标签的 download 属性。只需要在 标签中添加 download 属性即可。这个属性可以不设置值，或者设置为你希望下载的文件名。

下载PDF文件

下载图片

当用户点击这个链接时，浏览器会尝试下载 file.pdf 文件，并将其保存为 指定下载的文件名.pdf（如果指定了文件名）。 如果没有指定文件名，浏览器通常会使用原始文件名。

如何处理浏览器不支持 download 属性的情况？

虽然现代浏览器基本都支持 download 属性，但为了兼容老旧浏览器，可以结合后端设置 Content-Disposition 响应头来实现强制下载。 这需要在服务器端进行配置，具体取决于你使用的后端技术。

例如，在 PHP 中，你可以这样设置：

这段代码会强制浏览器将文件作为附件下载，而不是尝试在浏览器中打开。

download 属性对跨域资源有效吗？

download 属性在同源情况下工作良好。 但是，对于跨域资源，由于浏览器的安全限制，直接使用 download 属性可能无法生效。

解决跨域下载问题，通常需要服务器端的配合，例如设置 Access-Control-Expose-Headers 响应头，允许客户端访问 Content-Disposition 头部。

另外一个方法是使用 JavaScript 来发起下载，例如使用 fetch API 获取文件内容，然后创建一个 Blob 对象，并使用 URL.createObjectURL 创建一个下载链接。 这种方法可以绕过一些跨域限制，但仍然需要服务器端的适当配置。

fetch('https://example.com/path/to/your/file.pdf', {mode: 'cors'})
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '指定下载的文件名.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

这个方法首先使用 fetch 获取跨域资源，然后将其转换为 Blob 对象。 接着，创建一个临时的 标签，并设置其 href 属性为 Blob 对象的 URL。 最后，模拟点击这个链接，触发下载。 记得在下载完成后，释放 Blob 对象的 URL，避免内存泄漏。 这种方法相对复杂，但可以在一定程度上解决跨域下载的问题。

今天关于《HTML下载属性使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于跨域,标签,Content-Disposition,download属性,强制下载的内容请关注golang学习网公众号！