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
