一招教您轻松搞定前端开发文件下载及Base64位转换

2023-12-15 05:47:51

前端开发中的文件下载和Base64位转化

在前端开发中，我们经常需要处理文件的下载和转化。掌握这些技巧可以极大地提升我们的开发效率和用户体验。

文件下载的正确姿势

想象一下，你正在开发一个文件管理系统。用户需要能够从系统中下载文件。然而，常规的下载方法却无法实现，文件只会在浏览器中打开。这是因为服务器没有设置正确的响应头。

为了实现文件下载，我们需要在服务器端设置Content-Disposition响应头，告诉浏览器这是一个可下载的文件。例如，在 Node.js 中，代码如下：

res.setHeader('Content-Disposition', 'attachment; filename="file.txt"');

其中：

Content-Disposition指定了文件的处置方式，attachment表示可下载
filename指定了下载后的文件名

设置好响应头后，我们就可以在前端使用fetch() API下载文件：

fetch('https://example.com/file.txt', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/octet-stream'
  }
}).then(res => {
  // 将文件保存到本地
  res.blob().then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
    window.URL.revokeObjectURL(url);
  });
});

Base64位转化的妙招

有时候，我们需要在 HTML 代码中直接引用图片、音频或视频等媒体资源。这时，Base64位转化就派上用场了。

Base64位转化是一种将文件转化为一串编码字符的技术。我们可以使用FileReader API实现这一功能：

const reader = new FileReader();
reader.onload = function() {
  const base64 = reader.result;
  // 将Base64位数据插入 HTML
  const img = document.createElement('img');
  img.src = base64;
  document.body.appendChild(img);
};
reader.readAsDataURL(file);