提示文件不存在
分隔符是/
, 不是\
, 在使用dialog.showOpenDialog
读取的结果时需要转换;
读取无响应, 无错误提示
<!DOCTYPE html>
<html>
<body>
<div fileContent>文件内容</div>
<script type="text/javascript" src="resources/jquery-3.4.1.js"></script>
<script>
window.$ = module.exports;
var fs = require('fs');
fs.readFile('sis.txt', 'utf-8', (err, data) => {
console.log(err, data)
$('div[fileContent]').text(data.substr(0, 100));
})
</script>
</body>
</html>
如上代码, 在控制台使用npx electron .
启动App时, 可以正常读取sis.txt中的内容并显示;
但是, 如果在页面按下CTRL+R
重新加载后, 就读取不了, 而且 网络/控制台 都没有提示;
调试发现在刷新时会丢失ReadFileContext
解决
- 修改获取fs模块方式
var fs = require('fs');
修改为
var fs=require('electron').remote.require('fs')
- 使用IPC
经过缜密的调试后,我决定绕一下, 把文件读取模块放置在主进程, 渲染进程同主进程通过ipc进行通信
修改后的页面
<!DOCTYPE html>
<html>
<body>
<div fileName>文件名称</div>
<hr>
<div fileContent>文件内容</div>
<script type="text/javascript" src="../static/jquery-3.4.1.js"></script>
<script>
window.$ = module.exports;
const {
ipcRenderer,
remote
} = require('electron');
ipcRenderer.on('file-read-complete', (event, arg) => {
console.log('rec data', event, arg);
$('div[fileContent]').text(arg.data);
})
function rd() {
remote.dialog.showOpenDialog({
title: '选择文件',
defaultPath: 'afile.pos'
}).then((result) => {
if (result.canceled) return;
$('div[fileName]').text(result.filePaths[0]);
var path = result.filePaths[0].replace(/\\/g, '/');
window.temp = path;
ipcRenderer.send('file-read-req', path);
});
}
rd();
</script>
</body>
</html>
主进程
var electron = require('electron')
var fs = require('fs')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
var ipc = electron.ipcMain
app.on('ready', () => {
let mainWindow = new BrowserWindow({
width: 1521,
height: 800,
webPreferences: {
nodeIntegration: true, // 渲染进程使用require
contextIsolation: false,
enableRemoteModule: true // 使用remote模块
}
});
mainWindow.maximize();
mainWindow.webContents.openDevTools()
mainWindow.loadFile('./pages/demo.html');
mainWindow.on('close', () => {
mainWindow = null
})
ipc.on('file-read-req', (event, arg) => {
console.log('ac req', event, arg);
fs.readFile(arg, 'utf-8', (err, data) => {
console.log('read done', err, data);
event.sender.send('file-read-complete', {
err,
data
})
})
});
})