Question

我创建了一个简单的电子项目，创建了一个菜单，用于打开文件，直到我从文件中获取数据，一切都很好。我发现没有document或$对象，如何将数据传递到DOM，例如p textContext？

dialog.showOpenDialog({properties: ['openFile']}, (filePath) => {
        // read the file
        fs.readFile(filePath[0], (err, data) => {
            if (err) {
                // do something
            } else {
                // this not work
                document.getElementsByTagName("p")[0].textContent = data.toString();
            }
        })
    });
}

Answer 1

在主流程中（我认为您拥有此代码），您无权访问document。您必须通过使用IPC，在HTML甚至是全局代码上执行代码来在进程之间进行通信。（您可以在网上找到很多关于它的文章）有关详细信息，请参见electron's architecture。

应对这种情况的一个例子是

main.js

const { app, BrowserWindow, Menu, dialog } = require('electron')
const fs = require('fs')
const path = require('path')

app.once('ready', () => {
  let win = new BrowserWindow()
  win.loadURL(path.join(__dirname, 'index.html'))
  win.setMenu(Menu.buildFromTemplate([
    {
      label: 'Open File',
      click (menuItem, browserWindow, event) {
        dialog.showOpenDialog({
          properties: ['openFile']
        }, (filePath) => {
          fs.readFile(filePath[0], (err, data) => {
            if (!err) {
              browserWindow.webContents.send('print-file', data.toString())
            }
        })
        })
      }
    }
  ]))
})

index.html

<html>
  <body>
    <script>
      const { ipcRenderer } = require('electron')
      ipcRenderer.on('print-file', (event, datastr) => {
        document.getElementsByTagName("p")[0].textContent = datastr
      })
    </script>
    <p></p>
  </body>
</html>

Answer 2

我没有一个可以立即测试此环境的环境，但是我认为您写错了showOpenDialog。如果您查看https://github.com/geodocker/geodocker-accumulo-geomesa，则第一个参数是可选的浏览器窗口对象。看来您没有使用它，所以您的代码应该是：

dialog.showOpenDialog(null, {properties: ['openFile']}, (filePath) => {
        // read the file
        fs.readFile(filePath[0], (err, data) => {
            if (err) {
                // do something
                console.log('ERROR: ' + data);
            } else {
                // this not work
                console.log('PASS: ' + data);
                document.getElementsByTagName("p")[0].textContent = data.toString();
            }
        })
    });
}

当参数（参数）为可选参数时，您仍然需要发送一些内容。由于您不想使用它，因此我发送了null，因此showOpenDialog函数知道您不会使用它。我还添加了一些console.log()，以便您可以在尝试使用data之前测试一下结果。

Answer 3

main.js：

 Menu.setApplicationMenu(Menu.buildFromTemplate([
      {
        label: '&File',
        submenu: [
          {
            label: 'Open',
            accelerator: 'CmdOrCtrl+O',
            click() {
              showOpen()
            }
          },
          { type: 'separator' },
          {
            role: 'quit',
            accelerator: 'CmdOrCtrl+Q'
          }
        ]
      }])
    
      function showOpen() {
        dialog.showOpenDialog({
          properties: ['openFile']
        }).then(result => {
          console.log(result.canceled)  // Optional
          console.log(result.filePaths) // Optional
          
          // Read first file of list (or process an array of files)
          readFile(result.filePaths[0]) 
        }).catch(err => {
          console.log(err)
        })
      }
    
      function readFile(filepath) {
        fs.readFile(filepath, 'utf-8', (err, data) => {
          if(err){
            alert("An error ocurred reading the file :" + err.message)
            return
          }
          console.log(JSON.parse(data)) // For JSON file only
        })
      }

您处理文件而不是 console.log(JSON.parse(data))，然后使用例如 IPC

将其发送到浏览器

电子初学者，如何从菜单读取文件到html？

3 个答案: