Electron读取本地⽂件并显⽰Electron读取本地⽂件并显⽰，也就是暴露⼀个读取本地特定⽂件内容的接⼝给渲染进程调⽤。
主要参考：
基于官⽅的快速教程⽰例代码进⾏修改，原始代码如下：
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
/
/ This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
<('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (AllWindows().length === 0) createWindow()
})
})
/
/ Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
nodeselector<('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
main.js
// preload.js
/
/ All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = ElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
preload.js
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- /en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
index.html
把nodeIntegration设置为true，contextIsolation设置为false：
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false,
}
})
这样⼦就可以直接在渲染器处运⾏Node.js代码：
// renderer.js
let fs = require("fs");
if (err) (err);
console.String());
});
但是这样造成的结果是，别⼈有可能通过Node.js运⾏环境随便操控本地操作系统的⽂件，或者造成其它风险：
⼆、直接写在preload.js中
为啥⼀定要写在renderer.js⾥呢？直接写在preload.js⾥就好了。（新⼿的疑惑：之所以区分preload.js和renderer.js是⼀种类似于“前后端分离”的思想吗？有什么东西不能直接写在preload.js ，⾮得写在renderer.js⾥的呢？有说法是“通过预加载把⽤到的api暴露到全局，这样主进程和渲染进程都能⽤”；有
说法是“preload.js是为了把⼀些原属于electron的代码通过windows["xxxxx"] 提供给前台js调⽤的”）
在index.html中添加⼀个按钮，每按⼀次从本地读取⼀次⽂件：
<button id="btn1">按钮1</button>
修改preload.js：
// preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
省略号
let readAndDisplay = () => {
let fs = require("fs");
if (err) (err);
console.String());
let myNode = String());
document.body.insertBefore(myNode, document.body.firstChild);    });
}
document.querySelector('#btn1').addEventListener("click", event => {    readAndDisplay();
})
省略号
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。