Unable to save a state into a file through MS office TaskPane using React JS

Question

As a user writing an MS Word template, after I have added a number of manual fields on the ‘AddField’ tab, I want to be able to save this state to disk in a config file. When the Save button is pressed, a dialog should open allowing the user to choose a filename and save a file to disk. The file should contain the data in this.state.addedFields in JSON format, but use extension .dg so that we can easily differentiate docgen files. Simply, Clicking save button opens dialog to choose location to save a .dg file in MS word TaskPane.

This codes work fine on browser but when it comes to MS TaskPane it doesn't trigger anything.

const handleSave = () => {
  const { addedFields } = this.state;
  const data = JSON.stringify(addedFields);
  const filename = "document.dg";

  const blob = new Blob([data], { type: "text/plain;charset=utf-8" });
  await saveAs(blob, filename);
}

this codes which mixed with electron and fs returning the error of can't resolve fs modules. seems to do not work in react or using wrong import and wrong implementation

function onSaveButtonClick() {
  // Show the save dialog
  dialog.showSaveDialog({
    defaultPath: 'untitled.dg',
    filters: [{ name: 'DG Files', extensions: ['dg'] }]
  }).then(result => {
    if (result.filePath) {
      // Write the file
      const fileContent = 'Your file contents here'; // Replace with your actual file content
      fs.writeFile(result.filePath, fileContent, 'utf-8', err => {
        if (err) {
          console.error('An error occurred while saving the file:', err);
        } else {
          console.log('The file was saved successfully!');
        }
      });
    } else {
      console.log('The user did not select a file location');
    }
  }).catch(err => {
    console.error('An error occurred while showing the save dialog:', err);
  });

Answer 1

I want to be able to save this state to disk in a config file. When the Save button is pressed, a dialog should open allowing the user to choose a filename and save a file to disk.

For security reasons you can't access the local file system on the end user machine. See Persist add-in state and settings for possible options in web add-ins.

Use members of the Office JavaScript API that store data as either:

• Name/value pairs in a property bag stored in a location that depends on add-in type.
• Custom XML stored in the document.

Also you may consider using techniques provided by the underlying browser control: browser cookies, or HTML5 web storage (localStorage or sessionStorage). However, some browsers or the user's browser settings may block browser-based storage techniques. You should test for availability as documented in Using the Web Storage API.