Print Pdf Directly from JavaScript

Print PDF directly from url

To display the file in the same tab of the browser you can use:

window.open(url, "_self");

Or also you can try:

window.location.assign(url);

If by printing you mean in a printer you can use http://printjs.crabbly.com/

How to print pdf.js document?

Try using the javascript-function window.print();, which opens the print-dialog.

You will have to add an button to your html, which triggers the command - its not possible within the pdf.

For this reason, you will need an iFrame, and use something like this:

function printIt() {
    var wnd = window.open('http://your-pdf-url');
    wnd.print();
}

<input type="button" value="Print" onclick=printIt()>

window.print() wouldn't work, because it would also print the surrounding html.

EDIT:

From your comment, I now know, that you want to print the content of a canvas-element - which is much easier.

You don't need an iframe, you can put the button on the same page, and use window.print();.

In order to only print the canvas-element, and to hide the surroundings (like the button), you can use css-Syntax like this:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

@media print specifies css-code, which only applies for a webpage, if it gets printed. If you now asign the class .no-print to everything except the canvas-element, only your pdf will be printed.

You can also use this css-code, if it's easier:

@media print
{    
    *
    {
        display: none;
    }
    canvas 
    {
        display: inline;
    }
}

Related Topics