La siguiente función javascript obtiene como parámetro la vista HTML que se quiere imprimir desde el navegador web.  Llama esta función desde cualquier parte de tu código javascript y tu navegador abrirá al instante la opción de imprimir la vista HTML que le hayas pasado como si fuera un documento de texto.

Función JavaScript imprimir HTML desde el navegador como si fuera un documento

function print(printHtml) {
    var urlCss = "http://tuFicheroCssAqui.css";   
    var iframe = document.createElement('iframe');
    var div = document.createElement('div');
    var tagStyle = document.createElement('link');
    tagStyle.setAttribute("rel","stylesheet");
    tagStyle.setAttribute("type","text/css");
    tagStyle.setAttribute("href",urlCss);
    tagStyle.onload = function () {
        openPrint(iframe);
    }
    div.innerHTML = printHtml
    document.body.appendChild(iframe);
    iframe.contentDocument.body.appendChild(div);
    iframe.contentDocument.head.appendChild(tagStyle);
}

function openPrint(iframe) {
    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
        iframe.contentWindow.print();
    } else {
        iframe.contentWindow.document.execCommand('print', false, null);
    }

    document.body.removeChild(iframe);
}

Para aplicarle estilos CSS a la vista HTML que vayas a imprimir debes incluir la ruta del fichero CSS en la variable var urlCss.

En funcionamiento

Cuando llames a la función print(html)  el navegador abrirá una ventana correspondiente a la configuración de la impresión del documento. Dependiendo del navegador que uses la ventana emergente de impresión de documento será diferente.

En el caso de usar Chrome la ventana emergente será similar a la siguiente donde se muestra una previsualización del documento a imprimir:

chrome print document

En el caso de Firefox , como puedes observar en la siguiente captura, no muestra previsualización alguna del documento a imprimir.

firefox print document

Comparte el post