(十一)Electron 导入导出文件

最新推荐文章于 2024-06-27 16:36:21 发布

weixin_33720452

最新推荐文章于 2024-06-27 16:36:21 发布

阅读量3.4k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b6abf0c6fb9a04fab4537fd

版权

主要功能：

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

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

导出逻辑

使用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 `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="author" content="CEditor">
      <title>${title}</title>
      <link rel="stylesheet" href="https://cyyjs.github.io/static/md.css">
    </head>
    <body class="markdown-body code-github">
      <h1>${title}</h1>
      ${body}
    </body>
  </html>`
}
复制代码

可以自定义一些样式等。

导出PDF文件

electron的webContents提供了一个printToPDF方法，我们可以直接使用这个方法来导出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读取文件即可。

博客地址: alibt.top

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

weixin_33720452

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
(十一)Electron 导入导出文件

主要功能：1、导入md文件2、导出md文件3、导出html文件4、导出pdf文件主要使用技术为nodejs的fs模块，以及electron的dialog导出逻辑使用dialog.showSaveDialog获取导出文件的路径，然后调用fs.writeFileSync同步写入文件即可。var filters = [ { name: filename, ex...
复制链接

扫一扫