Accentsconagua

Aprenda cómo diseñar artículos para imprimir y enviar por correo electrónico

Código
Share

Al diseñar sitios web, una característica comúnmente deseada es la capacidad de imprimir dinámicamente o enviar por correo electrónico cualquier sección de una página web. Desafortunadamente, esta idea generalmente se desecha más tarde en el proyecto debido a la falta de tiempo o conocimiento. Formatear el texto para imprimir es más difícil de lo que parece inicialmente. Hoy usaremos JavaScript para buscar automáticamente ciertos elementos de la página y formatearlos correctamente para una impresión.


Objetivos:

Al final de este tutorial, habremos logrado lo siguiente:

  • Use jQuery para imprimir o enviar por correo electrónico cualquier sección de una página automáticamente cuando se hace clic en un elemento determinado.
  • Formatea y cambia el estilo para optimizar para imprimir o enviar por correo electrónico..
  • Agregue variables a la versión de correo electrónico (A, De, Mensaje, etc.)

La página

¿Qué está mal con esto??

Wow ... esa página es colorida. Estoy de acuerdo, no es el mejor esquema de color del mundo. Este diseño definitivamente no fue diseñado para imprimir. Aunque el fondo azul no se imprimirá en la mayoría de las impresoras, la impresora simplemente lo hará desaparecer. Sin embargo, esto desordenará el resto del diseño porque ahora el texto naranja brillante y el verde se imprimirán sobre un fondo blanco. No hay una manera fácil para que un usuario imprima un buen artículo en formato blanco y negro de esta página, excepto copiarlo en un procesador de textos y formatearlo ellos mismos..

Mantener el diseño, solucionar el problema

Una solución podría ser proporcionar una hoja de estilo de impresión, como lo ha hecho Tuts +. Esto funcionaría si solo hubiera un artículo en una página. Desafortunadamente, este ejemplo está en formato de blog. Esto significa que hay varios artículos en una página; y es probable que el usuario solo quiera imprimir un artículo. Vamos a utilizar jQuery para permitir al usuario hacer clic en un enlace después de cada artículo que da formato al artículo y les permite imprimirlo o enviarlo por correo electrónico..

HTML para esta página

El HTML es bastante simple para esta página. Agregaremos un par de clases estándar: una para indicar una sección para imprimir / enviar por correo electrónico (.printSection), otra para indicar el área que contiene los enlaces para imprimir o enviar por correo electrónico (.printControls), una clase para todos los enlaces de impresión ( .printControl), y una clase para todos los enlaces de correo electrónico (.emailControl). Observe cómo también enlazamos con el archivo minified de Google. Esto nos permite usar jQuery más tarde.. 

    Imprimir | Email jQuery Plugin    
 
  
Esta es una partida

  
Texto del artículo
 
Sección de impresión
 | 
Sección de correo electrónico
 
 
  
Esta es una partida diferente
Texto del artículo
 
Más texto del artículo
 
Sección de impresión
 | 
Sección de correo electrónico
 
 
  
Este es otro encabezado
Texto del artículo
 
Más texto del artículo
 
Sección de impresión
 | 
Sección de correo electrónico
 
 
  
Esta es una partida de nuevo
Texto del artículo
 
Más texto del artículo
 
Sección de impresión
 | 
Sección de correo electrónico

El CSS

El CSS es bastante simple también.

 cuerpo text-align: center; Familia tipográfica: Tahoma, Arial, Helvetica, Sans Serif;  h2 color: # d98841; tamaño de fuente: 48px; relleno: 0px; margen: 0px; fuente-peso: normal;  .page-wrap margin-left: auto; margen derecho: auto; ancho: 550px; fondo: # 10222b; relleno: 15px; alineación de texto: izquierda;  .printSection p color: # bdd684; tamaño de fuente: 12px; alinear texto: justificar;  p.printControl, p.emailControl, .printControls display: inline; color: # f2ece4;  p.printControl, p.emailControl cursor: puntero;  img margen izquierdo: 35 px;

También agregaremos un poco de CSS para aumentar la usabilidad. En caso de que Javascript esté deshabilitado, no queremos enlaces muertos, por lo que ocultamos los enlaces:

Script Time

¿Qué queremos lograr al imprimir??

  • agregar un oyente para esperar a que se haga clic en un .printControl o .emailControl.
  • Cambiar el aspecto de la sección para que sea fácil de imprimir.
  • Agarra las partes de la página que queremos imprimir.
  • abrir una ventana y dimensionarla.
  • Pon las partes de la página que agarramos en la ventana.
  • abre el cuadro de diálogo de impresión
  • cerrar la ventana después de terminar de imprimir

Cómo vamos a lograr estas cosas.?

Añadir el oyente:

Ponemos al oyente de impresión dentro de la función de lectura DOM: 

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () // Aquí colocaremos el código de impresión););

Cambiar la apariencia

Tenemos que cambiar los colores del esquema de colores, a blanco y negro. Hay varias maneras en que podemos lograr esta tarea. El método que usaremos es agregar una clase temporalmente a la sección afectada, tomar el código para imprimir y luego eliminar la clase de inmediato. Añadimos la clase utilizando el selector de CSS de jQuery para seleccionar los divs, y luego agregamos una clase a todos los elementos dentro con el comando children ().

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); $ ('. printSection' ) .children (). removeClass ('printversion');););

También debemos agregar un poco más de estilo para los elementos con printversion:

 h2.printversion, p.printversion color: # 333333; alineación de texto: izquierda;  .printControls.printversion display: none;

Agarrando la seccion

Ahora vamos a agarrar la sección y ponerla en una variable. Vamos a poner esto después de agregar la clase pero antes de eliminarla, para que la versión en la variable sea con la clase agregada. Tomamos el HTML en la cabeza para obtener la información de estilo y concatenarla con el HTML de la sección. El "esto" nos permite seleccionar solo la sección en la que se hizo clic en lugar de todas ellas. Luego subimos a niveles desde el botón de impresión y tomamos ese. 

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ (' printSection '). children (). removeClass (' printversion ');););

Abriendo la ventana

Ahora necesitamos poner la variable en algún lugar. Pero primero, necesitamos abrir una nueva ventana. Estas líneas no son muy importantes y son simplemente JavaScript. No hay jQuery en este paso. Básicamente, abrimos una ventana, asignamos un nombre único y le damos algunos parámetros básicos. 

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ (' printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 ');););

Llenar la ventana

Ahora necesitamos llenar la ventana con lo que agarramos antes. Básicamente simplemente escribimos en la ventana el valor de la variable.. 

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ (' printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent);););

Imprimir y cerrar

Necesitamos agregar algunas líneas más antes de que terminemos. Primero, debemos enfocar la ventana y luego abrir el cuadro de diálogo de impresión. Luego cerramos la ventana después de que el cuadro de diálogo haya sido cerrado.. 

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ (' printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();););

Eso es. Ahora deberíamos tener un botón de impresión funcional después de cada artículo. Buen trabajo, pero aún no hemos terminado. Ahora tenemos que hacer que el botón de correo electrónico funcione correctamente..

¿Qué debemos lograr al enviar por correo electrónico??

  • agregar un oyente para esperar a que se haga clic en un .printControl o .emailControl.
  • Necesitamos la dirección de correo electrónico a la que lo envían..
  • Necesitamos su nombre.
  • Necesitamos su email.
  • Necesitamos un mensaje corto para ser enviado con.
  • poner toda esta información en variables mediante el uso de indicaciones.
  • Cambia la apariencia de la sección para que sea amigable con el correo electrónico.
  • Necesitamos la URL de la página, incluida una etiqueta de anclaje para ir directamente al artículo.
  • poner toda esta información en una variable.
  • poner esto en una nueva ventana.

Cosas que ya hemos hecho al imprimir.

No hay necesidad de repasar todos estos pasos nuevamente. Podemos omitir los que cubrimos con la impresión:

 $ (document) .ready (function () $ ('. emailControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); $ ('. printSection' ) .children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open ( windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus ();););

Obtención de la información

Para este ejemplo, no necesitamos nada extravagante para recuperar la información requerida. Solo vamos a presentar varias indicaciones que almacenan la información en variables.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Escriba a quién le gustaría enviar esto a'); var fromWho = prompt (' ¿Y cuál es su nombre? '); Var fromWhoEmail = prompt (' And What is Your Email? '); Var fromMessage = prompt (' ¿Tiene un mensaje? '); $ ('. PrintSection '). Children () .addClass ('printversion'); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus ();););

Obteniendo la URL y la etiqueta de anclaje

Ahora, necesitamos almacenar la URL actual y el número de artículo (a través de la etiqueta de anclaje) en las variables. Los combinaremos más tarde..

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Escriba a quién le gustaría enviar esto a'); var fromWho = prompt (' ¿Y cuál es su nombre? '); Var fromWhoEmail = prompt (' And What is Your Email? '); Var fromMessage = prompt (' ¿Tiene un mensaje? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; $ (' .printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' emailSection '+ uniqueName.getTime (); var emailWindow = window .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Poniendo todo junto

Primero combinamos la URL junto con la etiqueta de anclaje y la colocamos en una buena cadena de texto. Luego combinamos eso con todo lo que necesitamos en una variable llamada emailContent.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Escriba a quién le gustaría enviar esto a'); var fromWho = prompt (' ¿Y cuál es su nombre? '); Var fromWhoEmail = prompt (' And What is Your Email? '); Var fromMessage = prompt (' ¿Tiene un mensaje? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Fuente: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
A:'+ sendTo +'
'+'
De (Nombre):'+ fromWho +'
'+'
Desde el e-mail):'+ fromWhoEmail +'
'+'
Mensaje:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (); ); );

Código terminado

 $ (documento) .ready (función () $ ('. printControl'). haga clic en (función () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ (' printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();); $ ('. EmailControl '). haga clic en (function () var sendTo = prompt ('Por favor escriba a quién le gustaría enviar esto a'); var fromWho = prompt ('¿Cuál es su nombre?'); var fromWhoEmail = prompt ('Y ¿Cuál es su Correo electrónico? '); Var fromMessage = prompt (' ¿Tiene un mensaje? '); $ (' PrintSection '). Children (). AddClass (' printversion '); var emailID = $ (this) .parent () .parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Fuente: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
A:'+ sendTo +'
'+'
De (Nombre):'+ fromWho +'
'+'
Desde el e-mail):'+ fromWhoEmail +'
'+'
Mensaje:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (emailContent); emailWindow.document.close (); emailWindow.focus (); ); );

Estamos hechos

Ahora tenemos una forma automática de imprimir y enviar por correo electrónico las secciones de un sitio web que se degrada cuando JavaScript está deshabilitado. ¡Buen trabajo! Si te ha gustado este tutorial, estad atentos; En un futuro tutorial, veremos cómo convertir esto en un complemento de jQuery. Mientras tanto, si tiene alguna pregunta o comentario, asegúrese de dejarlos a continuación. Me encantaría saber de ti!

Código
×