主要功能:
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
读取文件即可。