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.
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.
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.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With