Electron实现文件另存为...

如何实现点击文件调起Electron另存为对话框

主进程代码

/**另存为...
 * 接收渲染进程 保存文件的 的通知
 * @param {Object} event
 * @param {String} url 下载链接
 * @param {String} fileName 文件名称包括后缀名，例如图1.png
 */
ipcMain.on('save-as', function(event, url, fileName) {
	//通过扩展名识别文件类型
    let filters = [{ name: '全部文件', extensions: ['*'] }];
    let ext = path.extname(fileName);//获取扩展名
    if (ext && ext !== '.') {
        const name = ext.slice(1, ext.length);
        if (name) {
            filters.unshift({
                name: '',
                extensions: [name]
            });
        }
    }
    let filePath = null;//用户选择存放文件的路径

    //1-  弹出另存为弹框，用于获取保存路径
    dialog.showSaveDialog(win, {
        title: '另存为',
        filters,
        defaultPath: fileName
    }).then((result) => { //点击保存后开始下载
        filePath = result.filePath;
        if (filePath) {
            win.webContents.downloadURL(url); // 触发will-download事件
        }
    }).catch(() => {
        console.log('另存为--catch');
    });

    //2- 准备下载的时候触发
    win.webContents.session.once('will-download', (event, item, webContents) => {
        if (!filePath) return;
        //设置下载项的保存文件路径
        item.setSavePath(filePath);
    });
});

预加载脚本

//向渲染器进程暴露一个全局的 window.electronAPI 变量。
const { contextBridge, ipcRenderer, app } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
	saveAs: (windowName,url,fileName) => ipcRenderer.send('save-as',windowName,url,fileName),//另存为，从渲染进程调取主进程的文件选择器
})

渲染进程

<template>
	<button @click="onClick">另存为</button>
</template>
<script>
	function onClick(){
		if(window.electronAPI && window.electronAPI.saveAs){
			let url = "https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg";//下载文件的url
			let fileName = "测试.jpg"//下载文件名称
			window.electronAPI.saveAs(url ,fileName )
		}
	}
</script>