electron打开文件的几种实现方式

1. 程序已经启动，通过点击打开文件，进行打开

this.$dialog
        .showOpenDialog({
          title: "打开文件",
          defaultPath: "",
          properties: ["openFile"],
          // properties: ['openFile', 'multiSelections'],
          filters: [
            { name: "Text", extensions: ["icode"] },
            { name: "Custom File Type", extensions: ["as"] },
            { name: "All Files", extensions: ["*"] }
          ]
        })
        .then(result => {
          if (!result.canceled && result.filePaths.length > 0) {
            this.$emitNode("tradeMenu", "open", result.filePaths[0]);
            //  监听主进程读完文件数据
            this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
              let trade = openFormat(result.filePaths[0], arg);
              this.newEditTrade(trade);
            });
          }
        })
        .catch(err => {
          console.log(err);
        });

其中的$dialog，emitNode，onNodeOnce等待都是利用electron的，利用Vue进行封装的，result是选中文件的一系列数据

 		Vue.prototype.$onNodeOnce=function(channel, listener){
            ipcRenderer.once(channel, listener)
        };
        
        // 监听主线程消息
        Vue.prototype.$onNode = function(channel,listener){
            ipcRenderer.on(channel, listener)
        }

        // 文件弹框全局使用
        Vue.prototype.$dialog = dialog

2. 在桌面直接打开文件(.html)，会自动打开软件，并读取文件， 或者将(.html)文件移动到程序图标上进行打开。

这个分两步，1.让程序能够代开文件，2.程序读取文件路径

"mac": {
      "icon": "./logo.icns",
      "fileAssociations": [
        {
          "ext": [
            "icode"
          ]
        }
      ],
      "target": [
        {
          "target": "dmg"
        }
      ]
    },
    "dmg": {
      "title": "ICODE",
      "icon": "./logo.icns",
      "backgroundColor": "#ffffff",
      "contents": [
        {
          "x": 192,
          "y": 344
        },
        {
          "x": 448,
          "y": 344,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },

主要利用fileAssociations来注册程序打开后缀名。

	//主线程代码
	global.fileToOpen = "";
	app.on('open-file', (event, path) => {
    // 当用户想要在应用中打开一个文件时发出。 
    // 事件通常在应用已经打开，并且系统要再次使用该应用打开文件时发出。 
    // 也会在一个文件被拖到 dock 并且还没有运行的时候发出。 
   		event.preventDefault()
	    fileToOpen = path;
	    //win是打开的窗口，如果程序未启动则不会触发
	    //窗口打开后可通过渲染进程代码global来获取路径
	    if(win){
	        win.webContents.send("activateThenOpenFile",fileToOpen)
	    }
	});
	//渲染进程代码(路径得到就ok了)
	let currentFile = this.$electronRemote.getGlobal('fileToOpen') || null;

3. 程序已经启动，通过点击打开文件，进行打开

//参考2程序以及启动。主进程
if(win){
   win.webContents.send("activateThenOpenFile",fileToOpen)
}

// 渲染进程
// 程序启动后双击-----打开文件
 this.$onNode("activateThenOpenFile",(event,path)=>{
   if (__.isString(path) && /\.icode$/.test(path)) {
     this.$emitNode("tradeMenu", "open", path);
     //  监听主进程读完文件数据
     this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
       let trade = openFormat(path, arg);
       this.newEditTrade(trade);
     });
   }
 })

4. 程序已经启动，通过移动文件到程序打开的页面，进行打开

这主要就要依赖原生拖拽

 // 拖拽进程序打开文件
    let drag = document.getElementById("drag")
    //此方法删除不行
    drag.addEventListener("dragover",  (e)=>{
      // 用来hack某些兼容性问题
        e.dataTransfer.dropEffect = "copy";
        e.stopPropagation();
        e.preventDefault();
    }, false);
    drag.addEventListener("drop",  (e)=>{
      e.preventDefault();
      e.stopPropagation();
      if(e.dataTransfer.files[0].path){
        let path = e.dataTransfer.files[0].path
        this.$emitNode("tradeMenu", "open", path);
        //  监听主进程读完文件数据
        this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
          let trade = openFormat(path, arg);
          this.newEditTrade(trade);
        });
      }
    }, false);

以上代码无法粘贴复制直接使用，但是能够提供方向，以及一些重要API方法。