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

猿始森林 2024-08-20 08:33:03 阅读 90

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

一、使用<code><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对象

设置请求的响应类型为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);

});

}

设置请求的响应类型为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);

});

}

arraybufferblob的区别

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

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

注意

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

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。