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

参考资料

• 【程序员日记】【Electron】00环境搭建
• 2020Electron-HTML+CSS+JS构建跨平台桌面应用程序【千锋Web前端】

声明

本文章仅供用于技术研究用途,请勿利用文章内容操作用于违反法律的事情。

关于作者

欢迎各位关注公众号和QQ群进行技术交流，关注有福利喔。

微信公众号：

qq群：IT技术控/953949723

[注意]传递专业知识、拓宽行业人脉——看雪讲师团队等你加入！