{"id":180,"date":"2022-10-26T12:40:00","date_gmt":"2022-10-26T12:40:00","guid":{"rendered":"https:\/\/pacohunterdev.com\/blog\/?p=180"},"modified":"2022-10-26T04:42:31","modified_gmt":"2022-10-26T04:42:31","slug":"imprimir-seccion-de-pagina-con-css-y-js","status":"publish","type":"post","link":"https:\/\/pacohunterdev.com\/blog\/2022\/10\/26\/imprimir-seccion-de-pagina-con-css-y-js\/","title":{"rendered":"Imprimir secci\u00f3n de p\u00e1gina con CSS y JS"},"content":{"rendered":"\n

A veces es necesario imprimir cierta secci\u00f3n o la p\u00e1gina entera. Esto podemos hacerlo con las funciones nativas que tiene el navegador. Para algunos de los proyectos que te present\u00e9 usaba una librer\u00eda que permit\u00eda imprimir la secci\u00f3n deseada. Pero hab\u00eda que pasar por separado el CSS o estilo que deseamos que mostrar\u00e1, es decir no lo tomaba simplemente tal cu\u00e1l estaba dise\u00f1ado, sino que se debe colocar de nuevo los estilos que va a poner.<\/p>\n\n\n\n

Para el generador de curriculum<\/a> us\u00e9 lo que te voy a presentar y se me hizo una manera muy sencilla de imprimir ciertas partes de la p\u00e1gina sin la necesidad de usar librer\u00edas y manteniendo el dise\u00f1o.<\/p>\n\n\n\n

Dise\u00f1ando lo que se va a imprimir<\/h2>\n\n\n\n

En mi caso voy a imprimir algunas tablas e im\u00e1genes, las he hecho con Bootstrap, pero si lo haces con otro framework debe de funcionar (Lo he probado tambi\u00e9n con Vuetify). Mi dise\u00f1o es el siguiente:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Son dos tablas, si se pulsa en imprimir todo <\/strong>se imprimir\u00e1n las dos tablas, y si se pulsa sobre el bot\u00f3n que est\u00e1 debajo de las tablas se imprimir\u00e1 la seleccionada. El fondo tambi\u00e9n se imprime.<\/p>\n\n\n\n

Poniendo lo necesario en el HTML<\/h2>\n\n\n\n

Se pone el HTML de lo que desees, en mi caso son una tabla y una lista. A las secciones que desees imprimir le podr\u00e1s un id <\/em>este servir\u00e1 para mostrar o no un elemento o el otro.<\/p>\n\n\n\n

\n
\n
\"\"
El contenedor de la tabla de los perros tiene el id de contenedor-perros<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
El contenedor de la lista de gatos tiene el id de contenedor-gatos<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Ahora, a los botones se les pone lo que van a realizar en el onclick. <\/em>Se invocar\u00e1 a la funci\u00f3n imiprimir()<\/em>, que recibe la secci\u00f3n que va a imprimir, perros, gatos o * (para ambas). Los botones quedan as\u00ed respectivamente.<\/p>\n\n\n\n

<button class=\"btn btn-success noMostrar\" type=\"button\" onclick=\"imprimir('*')\">Imprimir todo<\/button>\r\n\n<button class=\"btn btn-primary noMostrar\" type=\"button\" onclick=\"imprimir('perros')\">Imprimir tabla<\/button>\n\n<button class=\"btn btn-primary noMostrar\" type=\"button\" onclick=\"imprimir('gatos')\">Imprimir<\/button><\/code><\/pre>\n\n\n\n
Mostrar o no elementos<\/h2>\n\n\n\n
Para esto se emplea CSS, con la propiedad display <\/em>podemos establecer si se ve o no el elemento deseado.  Esta puede tener diferentes valores, pero el que nos interesa es el de none, <\/em>lo que hace es no mostrar el elemento. As\u00ed se oculta el elemento cuando se imprime uno o el otro. <\/p>\n\n\n\n
Algo muy importante es agregarlo dentro del  @media print, <\/em>pues en este se establecen las cosas que se van a imprimir o los estilos que se cambian si as\u00ed se dese. Para este ejemplo lo coloco en una clase que se le agrega a los elementos que no se quieren imprimir, en este casi queda as\u00ed:<\/p>\n\n\n\n
@media print {\r\n body {-webkit-print-color-adjust: exact;}\r\n  \t.noMostrar{\r\n   \t\tdisplay: none; \r\n \t}\r\n}\r\n<\/style><\/code><\/pre>\n\n\n\n
Ahora la clase .noMostrar <\/em>se agrega a los botones, ya que estos no quiero que se impriman<\/p>\n\n\n\n
<button class=\"btn btn-primary noMostrar<\/strong>\" type=\"button\" onclick=\"imprimir('gatos')\">Imprimir<\/button><\/code><\/pre>\n\n\n\n
Agregar y quitar clase cuando se imprime<\/h2>\n\n\n\n
El \u00faltimo paso es agregar la clase .noMostrar <\/em>a los contenedores cuando se quiere imprimir uno, el otro o todos.<\/p>\n\n\n\n
Primero asignamos los contenedores a una variable para poder trabajar con ellos mediante document.querySelector(\u00ab#id-contenedor\u00bb). <\/em>Despu\u00e9s con classList <\/em>accedemos a la lista de clases que posee dicho elemento y para terminar con los m\u00e9todos de remove <\/em>o add <\/em>eliminamos o agregamos la clase .noMostrar<\/em>. Lo coloqu\u00e9 dentro de un switch\/case para verificar la parte que se desea eliminar. En cada caso solo verifico cu\u00e1l cadena se recibe y dependiendo de ella agrego o elimino la clase. Al final simplemente se usa window.print() <\/em>para imprimir. Queda as\u00ed<\/p>\n\n\n\n
const gatos = document.querySelector(\"#contenedor-gatos\");\r\nconst perros = document.querySelector(\"#contenedor-perros\");\r\n\r\nfunction imprimir(elemento){\r\n\tswitch(elemento){\r\n\t\tcase \"perros\":\r\n\t\t\tgatos.classList.add('noMostrar');\r\n\t\t\tperros.classList.remove('noMostrar');\r\n\t\t\tbreak;\r\n\t\tcase \"gatos\":\r\n\t\t\tperros.classList.add('noMostrar');\r\n\t\t\tgatos.classList.remove('noMostrar');\r\n\t\t\tbreak;\r\n\t\tcase \"*\":\r\n\t\t\tperros.classList.remove('noMostrar');\r\n\t\t\tgatos.classList.remove('noMostrar');\r\n\t\t\tbreak;\r\n\t\tdefault:\r\n\t\t\tconsole.log(\"No imprimo nada\")\t\r\n\t}\r\n\twindow.print()\r\n}<\/code><\/pre>\n\n\n\n
El resultado es el siguiente:<\/p>\n\n\n\n
\n
\n
\"\"
Imprimir lista de gatos<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Impimir tabla de perros<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"
Imprimir ambas<\/figcaption><\/figure>\n\n\n\n
Nota: <\/strong>Para que el fondo se imprima, marca la casilla de gr\u00e1ficos de fondo <\/em>en las opciones de le venta de imprimir.<\/p>\n\n\n\n
Puedes ver el c\u00f3digo aqu\u00ed <\/a> y tambi\u00e9n la demo por aqu\u00ed<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
A veces es necesario imprimir cierta secci\u00f3n o la p\u00e1gina entera. Esto podemos hacerlo con las funciones nativas que tiene el navegador. Para algunos de los proyectos que te present\u00e9 usaba una librer\u00eda que permit\u00eda imprimir la secci\u00f3n deseada. Pero hab\u00eda que pasar por separado el CSS o estilo que deseamos que mostrar\u00e1, es decir no lo tomaba simplemente tal cu\u00e1l estaba dise\u00f1ado, sino que se debe colocar de nuevo los estilos que va a poner. Para el generador de curriculum us\u00e9 lo que te voy a presentar y se me hizo una manera muy sencilla de imprimir ciertas partes...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,17],"tags":[22,23],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","tag-css","tag-javascript"],"_links":{"self":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":6,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}