突破限制，畅快下载：前端a标签在本地和跨域文件中的妙用

当您在网站上点击一个链接时，浏览器会发送一个请求到服务器，服务器会返回一个HTML页面。如果链接指向一个文件，浏览器就会开始下载该文件。当文件下载完成后，浏览器会询问您是否要保存该文件，如果您选择保存，浏览器就会将文件保存到您的电脑上。

a标签的download属性可以用来指定下载文件的名称。如果download属性没有被指定，浏览器就会使用链接的文本作为下载文件的名称。

a标签的href属性可以用来指定要下载的文件的URL。如果href属性指向一个本地文件，浏览器就会直接下载该文件。如果href属性指向一个跨域文件，浏览器就会发送一个CORS请求到服务器。如果服务器允许跨域请求，浏览器就会下载该文件。

1. 本地文件下载

本地文件下载是指从本地计算机下载文件。本地文件下载可以通过a标签的href属性来实现。href属性的值可以是文件的绝对路径，也可以是文件的相对路径。

<a href="file:///C:/Users/Public/Documents/example.txt" download>下载示例文本文件</a>

2. 跨域文件下载

跨域文件下载是指从其他域名的服务器下载文件。跨域文件下载可以通过a标签的href属性和fetch API来实现。

<a href="https://example.com/example.txt" download>下载示例文本文件</a>

fetch('https://example.com/example.txt')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'example.txt';
    a.click();
    URL.revokeObjectURL(url);
  });

3. 使用blob对象下载文件

blob对象是一个包含二进制数据的对象。blob对象可以通过fetch API来创建。创建blob对象后，可以通过URL.createObjectURL()方法来创建一个指向blob对象的URL。然后，可以通过a标签的href属性来指定这个URL，从而实现文件下载。

fetch('https://example.com/example.txt')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'example.txt';
    a.click();
    URL.revokeObjectURL(url);
  });

4. 使用URL对象下载文件

URL对象是一个表示URL的