正文

学会JavaScript轻松下载文件夹：掌握5个实用技巧，告别手动下载烦恼

/0 浏览量
0628

在数字化时代，我们经常需要从网络上下载各种文件和文件夹。然而，手动下载不仅耗时费力，而且容易出错。幸运的是，JavaScript作为一种强大的前端脚本语言，可以帮助我们轻松实现文件夹的下载。下面，我将为你介绍5个实用的JavaScript技巧，让你告别手动下载的烦恼。

技巧一：使用a标签的download属性

在HTML中，a标签的download属性可以让我们直接下载文件。通过JavaScript，我们可以动态创建a标签，并设置其href和download属性来下载文件夹中的所有文件。

function downloadFolder(folderPath) {
  const folderName = folderPath.split('/').pop();
  const zip = new JSZip();
  const files = fs.readdirSync(folderPath);

  files.forEach(file => {
    zip.file(file, fs.readFileSync(`${folderPath}/${file}`, 'utf8'));
  });

  zip.generateAsync({type: 'blob'}).then(content => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(content);
    a.download = `${folderName}.zip`;
    a.click();
    URL.revokeObjectURL(a.href);
  });
}

技巧二：利用fetch和Blob下载文件夹

fetch是现代浏览器提供的一个用于网络请求的API，它可以用来下载文件夹中的文件。结合Blob对象，我们可以将下载的文件保存到本地。

function downloadFile(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob);
      a.download = url.split('/').pop();
      a.click();
      window.URL.revokeObjectURL(a.href);
    });
}

技巧三：使用axios库下载文件夹

axios是一个基于Promise的HTTP客户端，它可以轻松实现文件下载。通过配置axios请求的响应类型为blob，我们可以将下载的文件保存到本地。

function downloadFolder(folderPath) {
  const folderName = folderPath.split('/').pop();
  const url = `https://example.com${folderPath}`;

  axios({
    method: 'get',
    url: url,
    responseType: 'blob'
  }).then(response => {
    const a = document.createElement('a');
    a.href = window.URL.createObjectURL(response.data);
    a.download = `${folderName}.zip`;
    a.click();
    window.URL.revokeObjectURL(a.href);
  });
}

技巧四：使用fetch和FormData下载文件夹

FormData对象可以用来构建一个表单数据集，我们可以利用它来模拟文件上传，从而实现文件夹下载。

function downloadFolder(folderPath) {
  const folderName = folderPath.split('/').pop();
  const formData = new FormData();
  formData.append('folderPath', folderPath);

  fetch('https://example.com/download', {
    method: 'POST',
    body: formData
  }).then(response => {
    const a = document.createElement('a');
    a.href = window.URL.createObjectURL(response.data);
    a.download = `${folderName}.zip`;
    a.click();
    window.URL.revokeObjectURL(a.href);
  });
}

技巧五：使用Node.js下载文件夹

如果你是在服务器端开发，可以使用Node.js来下载文件夹。通过fs模块读取文件夹中的文件，并使用http模块创建下载链接。

const fs = require('fs');
const http = require('http');

function downloadFolder(folderPath) {
  const folderName = folderPath.split('/').pop();
  const files = fs.readdirSync(folderPath);

  http.createServer((req, res) => {
    if (req.url === `/download/${folderName}`) {
      res.writeHead(200, { 'Content-Type': 'application/zip' });
      const zip = new JSZip();
      files.forEach(file => {
        zip.file(file, fs.readFileSync(`${folderPath}/${file}`, 'utf8'));
      });
      zip.generateNodeStream({ type: 'nodebuffer' }).pipe(res);
    }
  }).listen(3000);
}

通过以上5个实用的JavaScript技巧，你可以轻松实现文件夹的下载。这些技巧可以帮助你节省时间，提高工作效率。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --