(十一)Electron 导入导出文件-白红宇

主要功能：

1、导入md文件 2、导出md文件 3、导出html文件 4、导出pdf文件

主要使用技术为nodejs的fs模块，以及electron的

导出逻辑

使用dialog.showSaveDialog获取导出文件的路径，然后调用fs.writeFileSync同步写入文件即可。

var filters = [  {      name: filename,      extensions: [type] // 文件后缀名类型， 如md  }]var filePath = dialog.showSaveDialog({   filters,   defaultPath: filename,   title: '导出',   buttonLabel: '导出'})复制代码

导出md文件

这个比较简单，直接将md写入文件即可：

fs.writeFileSync(filePath, content, 'utf8')复制代码

导出Html文件

首先需要通过editor实例获取html源码，方法如下：

let html = this.$refs.editor.d_render复制代码

然后通过一个html页包装后写入文件即可：

function getHtml(title, body) {    return `              
          
          
          ${title}      
                  ${title}
      ${body}      `}复制代码

可以自定义一些样式等。

导出PDF文件

electron的webContents提供了一个方法，我们可以直接使用这个方法来导出PDF。

逻辑是先将内容包装成html后加载到webContents主进程中，然后调用打印方法。

代码如下：

content = getHtml(title, html)    // 将获取到的html文件存入一个临时文件内  let tmpPath = path.join(userDataPath, 'tmp.html')  fs.writeFileSync(tmpPath, content, 'utf8')  let win = new BrowserWindow({      width: 768,      height: 1024,      show: false  })  // 创建窗口加载html文件  win.loadURL('file://' + tmpPath)  let contents = win.webContents  // 监听加载成功事件  contents.on('did-finish-load', () => {    // 调用打印接口，回调文件buffer数据      contents.printToPDF({}, (error, data) => {          if (error) throw error          // 写入文件          fs.writeFileSync(filePath, data)          // 关闭窗口          win.close()          // 删除HTML文件          fs.unlinkSync(tmpPath)      })  })复制代码

导入文件

使用dialog.showOpenDialog方法，获取要导入的文件路径。

let path = dialog.showOpenDialog({       filters: [           {               name: 'MD文件',               extensions: ['md']           }       ],       properties: ['openFile'],       message: '选择要导入的Mackdown文件',       buttonLabel: '导入'   })复制代码

然后调用fs.readFileSync读取文件即可。

博客地址:

更多精彩，请关注我的公众号！