Preface
最近尝试了很多不错的在线工具,只是每次都要进入网站,有点麻烦,于是想到之前了解过的electron,尝试一下打包成本地应用。
Contents
1.下载所有源文件
通过开发者工具,’copy all as Node.js fetch’,然后配合 node-fetch 库,将需要用到的资源下载到本地:
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70const fs = require('fs')
const fetch = require('node-fetch');
function checkAndWrite(filepath,res) {
console.log("ok , here it is:",filepath);
//todo create directory loop
const dirpath = filepath.substr(0,filepath.lastIndexOf("/"));
console.log(dirpath);
if(!fs.existsSync(dirpath)){
fs.mkdir(dirpath,{recursive:true},(err)=>{
if(err != null) {
console.log("mkdir err:",err);
return;
}
const dest = fs.createWriteStream(filepath);
res.body.pipe(dest);
})
return;
}
const dest = fs.createWriteStream(filepath);
res.body.pipe(dest);
}
// 这个是主页
fetch("https://material.io/resources/color/", {
"headers": {
"accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
"accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
"cache-control": "no-cache",
"pragma": "no-cache",
"sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
"sec-ch-ua-mobile": "?0",
"sec-fetch-dest": "document",
"sec-fetch-mode": "navigate",
"sec-fetch-site": "none",
"sec-fetch-user": "?1",
"upgrade-insecure-requests": "1",
"cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102"
},
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors"
}).then(res=>{
checkAndWrite('./html/main.html',res)
})
// 这个是其中的一个资源
fetch("https://material.io/resources/color/styles/vendor-bab328c105.css", {
"headers": {
"accept": "text/css,*/*;q=0.1",
"accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
"cache-control": "no-cache",
"pragma": "no-cache",
"sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
"sec-ch-ua-mobile": "?0",
"sec-fetch-dest": "style",
"sec-fetch-mode": "no-cors",
"sec-fetch-site": "same-origin",
"cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102; _gat=1"
},
"referrer": "https://material.io/resources/color/",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors"
}).then(res=>{
checkAndWrite('./html/styles/vendor-bab328c105.css',res)
})
2.在electron中加载
1 | mainWindow = new BrowserWindow({width: 1000, height: 800, webPreferences:{webSecurity:false}}) |
3. 注意的点
- main.html 下载下来之后,需要将对应的资源路径改为*相对的本地路径
- google-analysis相关的东西都去掉了,应该是用不上的
- 其他非https://material.io域名下的文件也要下载下来,并且到对应的文件里面去修改相对路径