electron靜默下載

electron 静默下载文件

cooljser 2020-12-24 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()}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#初始化 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56