Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to print pdf.js document?

I've generated a document with pdf.js and it shows correctly. I'don't have print button. How to add the button to allow users to print it ? I was using Chrome.

like image 354
Dejo Avatar asked Jan 30 '14 19:01

Dejo


People also ask

How do I print a JavaScript document?

JavaScript | Window print() Method. Page print in JavaScript is a simple code in JavaScript used to print the content of the web pages. The print() method prints the contents of the current window. It basically opens Print dialog box which lets you choose between various printing options.

How do I print a PDF in react js?

React pdf and download file using react-to-print To get started with the react hook form library with npm install npm install --save react-to-print after import { useReactToPrint } from "react-to-print" into app. js.


1 Answers

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;
    }
}
like image 86
maja Avatar answered Oct 25 '22 22:10

maja