【JavaScript编程】前端实现文件下载

在前端实现文件下载，主要有以下几种常见的方法：

一、使用<a>标签

这种方法是最常见的，只需要在HTML中创建一个<a>标签，并通过JavaScript控制其点击行为，就可以实现文件下载。例如：

function downloadFile(url, fileName) {
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

二、使用window.location.href

通过设置window.location.href属性来改变当前页面的URL，从而实现文件下载。例如：

function downloadFile(url) {
    window.location.href = url;
}

三、使用window.open

function downloadFile(url) {
    // 如果想在同一窗口打开文件，则将target设置为'_self'
    var target = '_self'; // 默认值是'_blank'
    window.open(url, target);
}

四、使用Blob对象

1. 设置请求的响应类型为blob，这样就可以接收到文件流。然后，通过获取文件流创建Blob URL，来实现下载。例如：

   function downloadFile(url, fileName) {
       fetch('URL', {
   	    method: 'GET',
   	    headers: {},
   	    responseType: 'blob' // 重要：设置响应类型为blob以便接收文件流
   	})
   	.then(response => response.blob())
   	.then(blob => {
           let blobUrl = window.URL.createObjectURL(blob);
           let a = document.createElement('a');
           a.href = blobUrl;
           a.download = fileName;
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
           // 释放blob URL
           window.URL.revokeObjectURL(blobUrl);
       });
   }
   

2. 设置请求的响应类型为arraybuffer，将ArrayBuffer转换成Blob，然后创建Blob URL，来实现下载。例如：

   function downloadFile(url, fileName) {
   	fetch('URL', {
   		method: 'GET',
   		headers: {},
   		responseType: 'arraybuffer' // 设置响应类型为ArrayBuffer
   	})
   	.then(response => response.arrayBuffer()）
   	.then(arrayBuffer => {
   	  // 在这里处理ArrayBuffer数据
   	  // 例如，可以将ArrayBuffer转换成Blob，然后创建一个链接让用户下载
   	  const blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/octet-stream' });
   	  const downloadUrl = window.URL.createObjectURL(blob);
   	  const a = document.createElement('a');
   	  a.href = downloadUrl;
   	  a.download = fileName;
   	  document.body.appendChild(a);
   	  a.click();
   	  document.body.removeChild(a);
           // 释放blob URL
   	  window.URL.revokeObjectURL(downloadUrl);
   	});
   }
   

3. arraybuffer和blob的区别

   当你想要处理二进制数据，如图片、音频或视频文件时，你应该选择responseType: 'arraybuffer'。这是因为ArrayBuffer是一种表示二进制数据的容器，它可以用来存储和传输非文本数据。当你设置responseType为’arraybuffer’时，浏览器会以ArrayBuffer的形式接收响应数据，这使得你可以直接访问和操作这些原始二进制数据。你还可以 将ArrayBuffer转换成JSON

   相比之下，如果你选择responseType: 'blob'，浏览器会以Blob的形式接收响应数据。虽然Blob也可以用来存储二进制数据，但它实际上是对底层数据的引用，这意味着你不能直接访问或操作这些数据，除非你将其转换为ArrayBuffer或其他形式。此外，Blob对象通常用于创建可下载的文件，而不是直接处理二进制数据。

注意

无论哪种方法，都需要确保服务器端的响应头正确设置了Content-Disposition为attachment，这样才能保证浏览器能够识别这是一个需要下载的文件。

Content-Disposition: attachment; filename="filename.jpg"