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

admin管理员组

文章数量:1794759

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方法。

本文标签： 几种方式文件electron