2020-02-29 阴 郑州
出场人物
- 沉瓶 - 产品经理
- 饭咸 - 程序员
故事
沉瓶：我之前发布在CSDN的文档想保存到本地，二次处理下，然后发到其他平台上，有什么好的办法没？
饭咸：有网址可以能把网页直接转为Markdown，然后保存到本地就可以。
沉瓶：那会不会很麻烦呢，我怎么能只获取到网页内的博客内容，其他没用的内容，忽略掉呢？
饭咸：博客都是有格式的，只要获取到关键标签就可以了。
沉瓶：那如果我的文章比较多，一个个操作是不是很麻烦呢？
饭咸：这倒也是，我最近在学习electron，要不就拿这个练练手吧。
沉瓶：那你试试，简单好用就行。
饭咸：好的，盘它。
需求
- 抓取CSDN博客保存为本地Markdown文件
实现步骤实现
1. 准备开发环境
- 基础安装参考：【程序员日记】【Electron】00环境搭建
- 安装turndown： 切换到工程目录后，执行命令
npm install turndown
2. 编写功能
2.1 编写页面
页面包含Markdown文件路径设置、浏览器地址、保存网址按钮、打开网址按钮、浏览器五个部分。内容如下图所示：
2.2 打开网址
页面加载完成时，执行初始化任务： 绑定按钮点击事件、获取全局对象blog_view
window.onload = function () {
blog_view = document.querySelector('#my_blog_view')
document.querySelector('#my_btn_load_url').onclick = on_my_load_url
document.querySelector('#my_btn_save_md').onclick = on_my_save_md
// 打开DevTools
// blog_view.openDevTools()
}
获取设置的网页URL，使用blog_view打开网页
function on_my_load_url() {
// 获取设置的网页URL
var my_url = document.querySelector('#my_url')
var url = my_url.value
console.log(url)
// 使用blog_view打开网页
blog_view.loadURL(url)
}
2.3 保存网址（保存为Markdown文件）
保存网址内容总共分四步：
- 判断是否是CSDN网址
- 获取文章标题、获取文章内容
- 将文章内容转为markdow
- 将文章内容保存到本地
具体代码如下所示：
/**
* 点击按钮事件：保存网址
*
*/
function on_my_load_url() {
// 获取设置的网页URL
var my_url = document.querySelector('#my_url')
var url = my_url.value
console.log(url)
// 使用blog_view打开网页
blog_view.loadURL(url)
}
/**
* 保存markdown文件
*
* @param {*} pth 保存路径
* @param {*} title 保存标题
* @param {*} md_data 保存内容
*/
function write_md(pth, title, md_data) {
fs.mkdir(pth + title, (err, data) => {
fs.writeFile(pth + title + '/README.md', md_data, (err, data) => {
// alert('err: ' + err + '\n, data: ' + data)
})
})
}
/**
* 获取markdown：csdn
*
*/
function get_markdown_csdn() {
var blog_save_path = document.querySelector('#my_blog_save_path').value
if (blog_view == null || blog_save_path == null) {
alert('blog_view == null || blog_save_path == null')
return
}
// 获取文章标题
blog_view.executeJavaScript("document.querySelector('#mainBox > main > div.blog-content-box > div > div > div.article-title-box > h1').innerHTML").then((title) => {
// 获取文章内容
blog_view.executeJavaScript("document.querySelector('#content_views').innerHTML").then((html_data) => {
// 将文章内容转为markdown
var tds = new require('turndown')();
var md_data = tds.turndown(html_data);
// 将文章内容保存到本地
write_md(blog_save_path, title, md_data)
})
})
}
3. 源码地址
github: https://github.com/ninecents/EZBlog
参考资料
声明
本文章仅供用于技术研究用途,请勿利用文章内容操作用于违反法律的事情。
关注有福利
微信公众号：
qq群：IT技术控/953949723
