说明：该例子主要实现把输入框中的文字保存到本地的文本文档中。

在main中添加几句代码

  1. const ipcMain = electron.ipcMain;
  2. const dialog = electron.dialog;
  1. ipcMain.on("openDir", function (e) {
  2.     var fileName = dialog.showOpenDialog(mainWindow, {title: "选择一个目录", properties: ["openDirectory"]});
  3.     e.returnValue = fileName ? fileName : null;
  4. });

这段代码防止文件没有名字而出错

html代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Hello World!</title>
  6.  </head>
  7.  <body>
  8.  <button id="btn-select-dest-dir">选择保存的目录</button>
  9.  <form id="form-data">
  10.      <div>
  11.          <textarea name="txt" style="width: 300px;height: 200px" required="required"></textarea>
  12.      </div>
  13.      <div>
  14.          <input type="submit" value="保存">
  15.      </div>
  16.  </form>
  17.  </body>
  18.  
  19.  <script>
  20.      // You can also require other files to run in this process
  21.      require('./renderer.js')
  22.  </script>
  23.  </html>

renderer代码

  1.  // This file is required by the index.html file and will
  2.  // be executed in the renderer process for that window.
  3.  // All of the Node.js APIs are available in this process.
  4.  const {ipcRenderer}=require("electron");
  5.  const fs = require("fs");
  6.  
  7.  class Renderer {
  8.      constructor() {
  9.          this.btnSelectDestDir = document.getElementById("btn-select-dest-dir");
  10.          this.formSaveData = document.getElementById("form-data");
  11.  
  12.          this.addListeners();
  13.      }
  14.  
  15.      addListeners() {
  16.          var self = this;
  17.  
  18.          this.btnSelectDestDir.onclick = function () {
  19.              var files = ipcRenderer.sendSync("openDir");
  20.  
  21.              if (files && files.length) {
  22.                  self.destDir = files[0];
  23.              }
  24.          };
  25.  
  26.          this.formSaveData.onsubmit = function (e) {
  27.              e.preventDefault();
  28.  
  29.              if (!self.destDir) {
  30.                  alert("请选择要保存的目录");
  31.                  return;
  32.              }
  33.  
  34.              var destFile = `${self.destDir}/data.txt`;
  35.              fs.writeFile(destFile, this["txt"].value, function (err) {
  36.                  if (!err) {
  37.                      alert(`成功保存文件${destFile}`);
  38.                  } else {
  39.                      alert("无法保存文件");
  40.                  }
  41.              })
  42.          };
  43.      }
  44.  }
  45.  new Renderer();

运行即可

补充：在main.js里面的

可以修改运行文件的路径。。。

electron小例子的更多相关文章

  1. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

  2. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  3. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  4. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  5. INI配置文件分析小例子

    随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...

  6. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  7. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  8. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  9. sbrk与brk的使用小例子

    sbrk() 和 brk() - Unix的系统函数   sbrk()和brk() 系统的底层会维护一个位置,通过位置的移动完成内存的分配和回收.映射内存时 以一个内存页作为基本单位.   void* ...

随机推荐

  1. 【LTE基础知识】SGLTE, SVLTE, CSFB, VoLTE

    4G网络下实现语音通话功能的技术共有三种--VoLTE.SGLTE(GSM /LTE同步并发)和CSFB(电路域回落).简单来说: VoLTE就是语音数据都在4G通道内完成: SGLTE是语音走2G通 ...

  2. Android权限安全(1)自定义,检查,使用权限

    1.自定义权限: <!-- 定义自定义权限 --> <permission android:name="com.example.f6k5i8.checkpermission ...

  3. svn转移版本库

    1.导出 svnadmin dump命令语法svnadmin dump REPOS_PATH [-r LOWER[:UPPER]] [--incremental] 示例:svnadmin dump E ...

  4. 【leetcode❤python】237. Delete Node in a Linked List

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  5. Linux 在一个命令行上执行多个命令

    Linux 在一个命令行上执行多个命令 1. [ ; ] 如果被分号(;)所分隔的命令会连续的执行下去,就算是错误的命令也会继续执行后面的命令. 2. [ && ] 如果命令被 &am ...

  6. Python字符串、元组、列表、字典互相转换的方法

    直接上代码!!!   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  7. servlet&jsp高级：第二部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 1.mybatis简介

    mybatis简介 MyBatis 是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为My ...

  9. Codeforces Round #380 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 2) E. Subordinates 贪心

    E. Subordinates time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. Python基础学习笔记（十一）函数、模块与包

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-functions.html 3. http://www.liao ...