打印掘金文章的 Js 脚本

177 阅读1分钟

摸鱼的时候逛掘金会发现一些文章写的非常的好,这个时候就想要打印出来,放在桌子上好好评鉴。但是如果直接调用网页的打印功能就会受到其它样式的干扰,最终致使页面混乱不堪。因此本文提供了一个脚本,在网页的控制台执行或者将其直接复制到您的插件中,就可以方便的去掉不需要的标签和样式,确保打印内容美观大方。

要实现打印掘金文章的功能,可以使用 JavaScript 的 document.querySelectorAll 方法来选择所有需要删除的元素,然后使用 forEach 方法遍历这些元素并使用 remove 方法将它们从文档中移除。接着,可以使用 document.querySelector 来选取 .main-area 元素,并设置其样式。

以下是 JavaScript 代码:

// 选择所有需要删除的元素
const elementsToRemove = document.querySelectorAll(
  '.sticky-block-box, div>gij-floating-activity, .global-component-box, .main-header, .article-suspended-panel, .sidebar.article-sidebar, .author-info-block, .comment-box-common, .recommended-area'
);

// 删除选中的元素
elementsToRemove.forEach(element => {
  element.remove();
});

// 选择.main-area元素并设置其宽度为90%
const mainArea = document.querySelector('.main-area');
if(mainArea) {
  mainArea.style.width = '90%';
}

请注意,这段代码应该在文档加载完成后执行,以确保所有元素都已经被加载到 DOM 中。如果你打算将这段代码写在自己的插件中,最佳实践是将其放在一个 DOMContentLoaded 事件监听器中,以确保在文档完全加载后再执行:

document.addEventListener('DOMContentLoaded', function () {
  // 之前的删除元素和设置宽度的代码
});

或者使用 jQuery,代码会更加简洁:

$(document).ready(function() {
  // 删除指定的元素
  $('.sticky-block-box, div > .gij-floating-activity, .global-component-box, .main-header, .article-suspended-panel, .sidebar article-sidebar, .author-info-block, .comment-box-common').remove();

  // 设置.main-area的宽度
  $('.main-area').width('90%');
});