vue3+electron实现文件下载到本地并实时查看进度条

在Vue 3中结合Electron框架实现文件下载功能，并提供实时进度条，通常需要以下几个步骤：

1. **安装依赖**：
- 安装`vue-cli-electron-builder`作为构建工具，它将处理Electron集成部分。

   npm install -D @vue/cli-plugin-electron-builder

2. **创建下载任务**：
使用`axios`或`fetch`等库从服务器获取文件流，并通过`fs`模块将其保存到本地。你可以使用Promise链或者`async/await`来同步下载过程。

import axios from 'axios';
import fs from 'fs';

const downloadFile = async (url) => {
  const response = await axios({
    method: 'get',
    responseType: 'stream',
    url,
  });
  
  // 创建一个可读流到本地
  const writeStream = fs.createWriteStream('path/to/downloaded-file');
  response.data.pipe(writeStream);

  // 进度监听
  const totalSize = parseInt(response.headers['content-length'] || 0);
  let downloadedSize = 0;
  writeStream.on('progress', (chunk, total) => {
    downloadedSize += chunk.size;
    setProgress(downloadedSize / totalSize);
  });

  return new Promise((resolve, reject) => {
    writeStream.on('finish', resolve);
    writeStream.on('error', reject);
  });
}

3. **更新进度条组件** (`setProgress`函数假设已存在)：
更新一个响应式组件显示下载进度，例如使用`v-model`绑定值。

<template>
  <div>
    <progress :value="downloadProgress" max="1"></progress>
    <button @click="startDownload">开始下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadProgress: 0,
    };
  },
  methods: {
    startDownload() {
      this.downloadFile('file-url')
        .then(() => console.log('下载完成'))
        .catch(error => console.error(error));
    },
  },
};
</script>

4. **打包应用**：
使用`vue-cli-electron-builder`构建 Electron 应用。

vue build --dev