浏览器和electron实现多文件下载保存本地

最近工作中有个需求是多文件保存功能，写完之后感觉可以分享一下。

此篇文章将讲解如何在浏览器和electron两种终端上实现图片、视频、文档三种类型文件的多文件保存功能，展示的代码也仅是有关多文件保存的技术代码。用到的技术是electron+vue3+vite。

一、浏览器的多文件保存

1、打开选择文件夹弹窗

// 打开选择文件夹弹窗
const handle = await window.showDirectoryPicker({});

2、实现文件保存指定路径的功能

注意：下述提到的文件数组是需要保存的文件信息，处理数组数据，确保其中包含文件名fileName和文件下载地址url两种字段数据。

2.1、遍历数组，依次获取文件的引用

// 遍历文件数组 
filesList.forEach(async (item) => {
    // 获取文件的引用
    const fileHandle = await handle.getFileHandle(item.fileName, {create: true});
})

2.2、将文件url转换为blob格式

// 将url转换为blob格式
const blob = await urlToBlob(item.url);

// 将url转换为blob的函数
function urlToBlob(url) {
    return new Promise((resolve) => {
        fetch(url).then(response => response.blob())
        .then(res => {
            var blod = new Blob([res]);
            resolve(blod);        
        })    
    })
}

2.3、创建可写入的文件对象，并写入文件，最后关闭写入操作

// 创建可写入的文件对象
const writeable = await fileHandle.createWritable();
// 写入内容：blob格式
await writeable.write(blob);
// 关闭写入
await write.close();

2.4、完整代码

// 保存文件列表函数
async function saveFileList(filesList: any) {
    try {
        // 打开选择文件夹弹框
        const handle = await window.showDirectoryPicker({});
        // 遍历文件数组 
        filesList.forEach(async (item) => {
            // 获取文件的引用
            const fileHandle = await handle.getFileHandle(item.fileName, {create: true});
            // 将url转换为blob格式
            const blob = await urlToBlob(item.url);
            // 创建可写入的文件对象
            const writeable = await fileHandle.createWritable();
            // 写入内容：blob格式
            await writeable.write(blob);
            // 关闭写入
            await write.close();
        });    
    }catch(error){
        console.log(error)    
    }
}

// 将url转换为blob的函数
function urlToBlob(url) {
    return new Promise((resolve) => {
        fetch(url).then(response => response.blob())
        .then(res => {
            var blod = new Blob([res]);
            resolve(blod);        
        })    
    })
}

二、electron的多文件保存

与浏览器的实现步骤大体相同，代码如下：

1、打开文件夹弹窗

// browserWindow 是可选的，弹出来的dialog是附着在这个browserWindow上。
const result = await dialog.showOpenDialog([browserWindow,] {
    // 调用electron的打开文件弹窗，设置只能选择文件夹
    properties: ['openDirectory']
})

2、实现文件保存的功能

2.1、拿到路径数据

// 用户选择的路径
let directoryPath = result.filePaths[0];

2.2、遍历数组，依次拼接每个文件路径；并下载文件。

filesList.map(async ({url, fileName}) => {
    // 拼接文件路径
    const destPath = path.join(directoryPath, fileName);
    // 请求接口 下载文件 以流的形式获取响应体，用于写入文件
    const response = await axios({
        method: 'get',
        url: url,
        responseType: 'stream'    
    })
})

2.3、将数据流保存到文件中。

const ws = fs.createWriteStream(destPath);
// 将数据流保存到文件中
response.data.pipe(ws);

2.4、完整代码

// 多文件下载保存
async function(event, filesList) {
    try {
        const result = await dialog.showOpenDialog([browserWindow,] {
            //调用electron的打开文件弹窗，设置只能选择文件夹
            properties: ['openDirectory']
        });
        if(!result.canceled) {
            // 用户选择的路径
            let directoryPath = result.filePaths[0];
            const filePromises = filesList?.map(async ({url, fileName}) =>{
                // 获取目标文件的路径
                const destPath = path.join(directoryPath, fileName);
                // 请求接口  下载文件
                const response = await axios({  
                    method: 'get',  
                    url: url,  
                    responseType: 'stream' // 以流的形式获取响应体，用于写入文件  
                  }); 
                const ws = fs.createWriteStream(destPath);
                // 将数据流保存到文件中
                response.data.pipe(ws);
                return new Promise((resolve, reject) => {
                    ws.on('finish', () => {
                        resolve(destPath);
                    })
                    ws.on('error', () =>{
                        reject(err);
                    })
                })
            })
            await Promise.all(filePromises);
            console.log('保存成功，做成功后的页面优化')
        }else {
            console.log('保存失败，做失败后的页面优化')
        }
    }catch(err) {
        console.log('保存失败，做失败后的页面优化')
    }
}

三、成果展示

1、触发保存操作

2、选择保存路径

3、成功保存到指定目录

综上，多文件下载保存功能就成功实现了，如文章中有任务不对的地方，欢迎指正。