electron 静默下载文件

上传、下载文件是一个很常用的功能，在 electron 中我们不但可以实现和 h5 一样的下载，也可以实现静默下载，让用户无感知。官方的做法是通过mainWindow.webContents.downloadURL(url)来实现的，这样实现的话需要主线程和渲染线程都做相关的改动，其实我们也可以利用 nodejs 在渲染进程中就做到静默下载，不需要用到主线程的窗口 api。

初始化一个窗口

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL('http://localhost:8080')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

初始化 h5 页面

<template>
    <div class="hello">
        测试下载
        <img :src="url" alt="">
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'HelloWorld',
    props: {
        msg: String,
    },
    data() {
        return {
            url: 'http://localhost:8080/zsh.jpg',
        }
    },
    methods: {
        saveBlob2File(blob, filePath) {
            return new Promise((resolve)=>{
                let reader = new FileReader();
                reader.onload = () => {
                    let buffer = new Buffer(reader.result);
                    window.fs.writeFile(filePath, buffer, {}, (err) => {
                        if (err) {
                            console.error(err);
                            return;
                        }
                        resolve()
                    });
                };
                reader.onerror = err => console.error(err);
                reader.readAsArrayBuffer(blob);
            })
        },
        async downloadFile() {
            await axios({
                url: this.url,
                method: 'GET',
                responseType: 'blob'
            }).then(data=>{
                console.log(data)
                this.saveBlob2File(data.data, './zsh.jpg')
            }).catch(err=>{
                console.error(err)
            })
        }
    },
    mounted() {
        this.downloadFile();
    },
};
</script>

步骤：

1. 通过 axios 下载图片二进制数据；
2. 利用 FileReader 读取二进制数据；
3. 将读取的结果写到本地。

参考文章

• https://newsn.net/say/electron-download-click.html