作者：翟天保Steven
版權聲明：著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處
前言
? ? ? ?在日常學習和技術積累過程中，我們經常會在 CSDN 等技術博客平臺上閱讀高質量的技術文章。然而，網頁閱讀存在著廣告干擾、網絡依賴等問題，很多時候我們希望能將文章保存為 PDF 格式，方便離線閱讀和整理筆記。
? ? ? ?總結為如下四點：
廣告與干擾元素影響閱讀體驗：CSDN 等平臺的文章頁面通常包含大量側邊欄廣告、推薦內容和互動組件，這些元素會分散注意力，影響閱讀效率。
離線學習與知識管理需求：在沒有網絡的環境下（如通勤、出差），我們仍然希望能夠繼續學習之前收藏的文章。將文章導出為 PDF 可以方便地進行離線閱讀。
個性化排版與打印需求：網頁版文章的排版可能不適合打印或長時間閱讀，通過導出為 PDF，我們可以自定義頁面布局、字體大小等參數，優化閱讀體驗。
知識沉淀與筆記整理：將重要的技術文章保存為 PDF 后，可以更方便地添加標注、整理筆記，形成個人知識庫。
? ? ? ?本文將介紹一種通過 JavaScript 代碼一鍵導出 CSDN 文章為 PDF 的方法，幫助你輕松獲取無干擾的純凈閱讀體驗。
功能解析
? ? ? ?若要實現此功能，先拆解分析。我們需要從如下幾點思考：
內容提取與準備
- 通過
document.getElementsByClassName方法獲取文章標題和內容 - 移除文章內容容器上的內聯樣式，避免原始樣式影響打印效果
- 創建自定義的頁眉頁腳，添加導出時間和版權信息
- 通過
臨時 DOM 修改
- 保存原始頁面內容，以便后續恢復
- 用提取的標題、內容和自定義的頁眉頁腳替換整個頁面內容
- 添加打印專用樣式，優化 PDF 顯示效果
PDF 生成與頁面恢復
- 調用
window.print()觸發瀏覽器的打印對話框 - 用戶在對話框中選擇 "保存為 PDF" 選項
- 打印完成后，將頁面內容恢復為原始狀態
- 調用
錯誤處理
- 使用
try...catch塊捕獲可能的錯誤 - 確保在發生錯誤時也能恢復原始頁面，避免頁面崩潰
- 使用
代碼實現
? ? ? ?根據上述四點分析，來實現功能，完整代碼如下：
(function(){'use strict';try {// 保存原始頁面內容，以便后續恢復var originalContent = document.body.innerHTML;// 獲取文章標題和內容（根據CSDN頁面結構）var pageTitle = document.getElementsByClassName('article-title-box')[0].innerHTML;var mainContent = document.getElementsByClassName('article_content')[0].innerHTML;// 移除文章內容容器上的內聯樣式，確保內容完整顯示var contentBox = document.getElementsByClassName('article_content')[0];contentBox.removeAttribute("style");// 準備打印時的頁眉和頁腳內容var headerContent = '<div class="print-header" style="text-align:center; font-size:14px; color:#666;">' + '導出自CSDN - ' + new Date().toLocaleDateString() + '</div>';var footerContent = '<div class="print-footer" style="text-align:center; font-size:14px; color:#666;">' + '? ' + new Date().getFullYear() + ' 個人版權所有</div>';// 創建打印專用樣式，優化PDF顯示效果var style = document.createElement('style');style.innerHTML = `@media print {body { font-family: 'Microsoft YaHei', sans-serif; }.print-header { position: fixed; top: 0; width: 100%; }.print-footer { position: fixed; bottom: 0; width: 100%; }img { max-width: 100% !important; height: auto !important; } /* 確保圖片適應頁面 */pre { white-space: pre-wrap; word-wrap: break-word; } /* 代碼塊自動換行 */a { text-decoration: none; color: inherit; } /* 鏈接不顯示下劃線和顏色 */}`;document.head.appendChild(style);// 臨時替換頁面內容，只保留標題、文章主體和頁眉頁腳document.body.innerHTML = headerContent + pageTitle + mainContent + footerContent;// 調整頁面寬度和縮放比例，優化打印布局document.body.style.width = "100%";document.body.style.zoom = 0.8;// 調用瀏覽器的打印功能，用戶可以選擇保存為PDFwindow.print();// 打印完成后，恢復原始頁面內容document.body.innerHTML = originalContent;return false;} catch(e) {console.error('導出PDF出錯:', e);// 發生錯誤時確保頁面恢復document.body.innerHTML = originalContent;return false;}
})();使用方法
- 打開你想要導出的 CSDN 文章頁面
- 按下 F12 打開瀏覽器開發者工具
- 切換到 Console 面板
- 復制上述代碼并粘貼到控制臺中
- 按下 Enter 執行代碼
- 在彈出的打印對話框中，選擇 "保存為 PDF" 選項
- 選擇保存位置和文件名，點擊 "保存"
? ? ? ?希望本文介紹的知識可以解決你的煩惱。?
? ? ? ?如果文章幫助到你了，可以點個贊讓我知道，我會很快樂~加油！
