前端 JavaScript 生成压缩 Zip 文件下载 - 使用 JSZip 库

要在前端生成并下载压缩 zip 文件，你可以使用 JavaScript 的原生功能或第三方库来实现。以下是一个使用第三方库 JSZip 的示例：

1. 在 HTML 文件中引入 JSZip 库：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js'></script>

2. 创建一个按钮或其他交互元素来触发生成和下载 zip 文件的操作：

<button id='downloadBtn'>下载 Zip 文件</button>

3. 在 JavaScript 文件中编写代码来处理生成和下载 zip 文件的逻辑：

// 当点击按钮时执行生成和下载 zip 文件的操作
document.getElementById('downloadBtn').addEventListener('click', function() {
  // 创建一个新的 JSZip 实例
  var zip = new JSZip();

  // 添加文件到 zip
  zip.file('file1.txt', '内容1');
  zip.file('file2.txt', '内容2');

  // 生成 zip 文件
  zip.generateAsync({type: 'blob'}).then(function(content) {
    // 使用 FileSaver 库保存并下载 zip 文件
    saveAs(content, 'example.zip');
  });
});

在这个例子中，我们首先创建了一个新的 JSZip 实例，并向其中添加了两个文件。然后，使用 generateAsync 函数以 blob 格式生成 zip 文件的内容。最后，使用 FileSaver 库的 saveAs 函数将生成的 zip 文件保存并下载到用户的设备上。

请注意，这个示例使用了第三方库 JSZip 和 FileSaver。你需要在 HTML 文件中引入这两个库，以使其正常工作。