Declaración de derechos de autor: este artículo es un usuario anónimo 丨 artículo original, indique la fuente para la reimpresión: https://blog.csdn.net/p1279030826/article/details/106602341
Este método se mejora a partir de la impresión directa de artículos CSDN o guardar PDF (eliminando contenido redundante) .
1. Función y uso
Cómo usar : Presione "F12" para ingresar a las herramientas de desarrollador, copie los siguientes js en la consola y presione Enter para imprimir con una tecla.
Función :
- 1. "Expandir automáticamente para leer el texto completo"
- 2. Elimine la información redundante, como la barra superior, la barra lateral, la visualización de artículos relacionados, la información de navegación, los anuncios y los me gusta. Modo realmente refrescante.
- 3. Vista previa de impresión de salida automática
- 4. Amplíe automáticamente la página impresa para evitar que el contenido del borde de la página se recorte. (Agregado recientemente el 31/10/2020)
Dos, dos métodos de obtención
Método antiguo: (este método ha quedado obsoleto, puede haber casos en los que el contenido del borde se recorta)
(function(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore, .pub-footer-new").remove();
$("aside").remove();
$(".tool-box").remove();
$("main").css('display','content');
$("main").css('float','left');
$("#mainBox").css('width','100%');
$(".main_father.clearfix.d-flex.justify-content-center").css("width","100%");
window.print();
})();
El último método: (2020/10/31)
Método uno: método de eliminación
Actualizar contenido: 1. Quite la barra de información de derechos de autor en la parte inferior 2. Agregue escala automática de la página impresa 3. Quite contenido redundante e inválido
Nota: Si encuentra que hay un título en la parte superior de cada página cuando imprime la vista previa, consulte el tercer paso a continuación para quitar la marca de "encabezado y pie de página".
(function(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box,.blog-footer-bottom").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore, .pub-footer-new").remove();
$("aside").remove();
$(".tool-box").remove();
$("main").css('display','content');
$("main").css('float','left');
$("#mainBox").width("100%");
document.getElementsByTagName('body')[0].style.zoom=0.8;
window.print();
})();Método 2: método de reconstrucción HTML (recién agregado el 31/10/2020)
Este método tiene la misma función que el método uno, el código es más conciso, la página web se restaura automáticamente después de la impresión y la posterior adición de otros módulos redundantes al CSDN no la afectará.
(function doPrint(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
var head_str = "";
var foot_str = "";
var older = document.body.innerHTML;
var title= document.getElementsByClassName('article-title-box')[0].innerHTML;
var main_body = document.getElementsByClassName('article_content')[0].innerHTML;
document.body.innerHTML = head_str + title + main_body + foot_str;
$("#mainBox").width("100%");
document.getElementsByTagName('body')[0].style.zoom=0.8;
window.print();
document.body.innerHTML = older;
return false;
})();
Tres, otros problemas
1. Guardar como PDF. Cambie la impresora a "Guardar como PDF".
2. Más configuraciones. ( Se ha agregado el método 2020/10/30 configuración automática en el código )
(1) Se cortarán algunas palabras en el borde de la página.
- Seleccione "Ninguno" para "Margen" para resolverlo.
- Utilice el zoom (por ejemplo, establezca "80%") para reducir el tamaño total de modo que no exceda la página.
(2) Puede desactivar el encabezado y el pie de página.
Cuarto, la parte de optimización
Este método agrega la modificación y eliminación de la siguiente información, y la impresión es realmente refrescante:
(1) Automáticamente "expande para leer el texto completo" e imprime automáticamente el texto completo.
(2) El problema de que la nueva versión de la página general se desplazará hacia la derecha.
(3) Examine la información en el encabezado del artículo:
(4) Como información en la parte inferior del artículo, información publicitaria en la parte inferior:
(4) El cuadro "Informar al principio" en el lado derecho del artículo.
============================ Actualización 20200906 ==================== ================================================ ================================================ ================================================ ================================================ =============================================== = ============
(5) La barra de información en la parte inferior
============================ Actualización 20201031 ==================== ================================================ ================================================ ================================================ ================================================ ============================================== == ===========
(6) La columna de información de derechos de autor en la parte inferior.
No sé si el nombre del módulo ha cambiado y la barra de información vuelve a aparecer. Aquí hay una actualización para eliminar la barra de información de derechos de autor en la parte inferior.
(7) Zoom automático de la página impresa
Descubrí que el contenido se recortó durante la vista previa de impresión y tuve que modificar manualmente la relación de zoom, lo cual es demasiado problemático. Aquí está la actualización para configurar automáticamente el zoom. (Referencia de método: impresión con zoom )
(8) Agregar un nuevo método de implementación
Método 2: método de reconstrucción HTML
Enlace de referencia: Leer , método JS / Jquery_ para lograr el div especificado de la página impresa