Writing file with electron/vue is not working

Question

I'm trying to write results of an electron/vue app to a file.

          const fs = require("fs");
      try {
        fs.writeFileSync(
          "myfile.txt",
          "the text to write in the file",
          "utf-8"
        );
      } catch (e) {
        alert(`Failed to save the file ${e}!`);
      }

As suggested here: Saving files locally with electron

But I get an error: fs.writeFileSync does not exist.

How can I get this to work?

Answer 1

The scripts running in web contexts don't have access to node or electron functionality by default as a security precaution. It's hard to find good samples for the current version, there are too many outdated or non-working samples out there. I have a sample repo where I communicate with the main thread to show an open file dialog and display the selected name and contents if you're interested.

The current way (Vue3, electron13) looks to be using context isolation, creating a preload script that runs in the render thread and has access to node and electron functionality.

1. Add configuration to vue.config.js

This adds a src/preload.js script as a preload script to pluginOptions.electronBuilder.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js'
    }
  }
});

2. Setup our plugin script in background.js

When creating the window, add the preload script:

  // Create the browser window.
  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      preload: path.join(__dirname, 'preload.js') // add preload script
    }
  })

3. Add src/preload.js script

In this script we have more privileges and can use node functionality like 'fs'. We can expose our own api to the web scripts:

import { contextBridge } from 'electron'
import fs from 'fs'

contextBridge.exposeInMainWorld('file', {
  save: (filePath, text) => {
    fs.writeFileSync(filePath, text, { encoding: 'utf-8' });
  }
});

4. Use window.file.save() in your code

try {
  window.file.save('myfile.txt', 'the text to write to the file');
} catch (e) {
  alert(`Failed to save the file ${e}!`);
}