I am trying to figure out how to print a .pdf from my web page without saving it first.
On one of my web pages I have a link that load a .pdf (a free downloadable coloring page for kids)
When I click on the link on my page "Click here for free easter coloring page" the .pdf image loads fine.
However, the problem occurs when I try to print it.
When I click on print a message pops up asking me to save the image. There is no way that this image will print for me.
What am I missing in my html code that prevents for successful printing of this image. I want to make it as user-friendly as possible.
The link to my page is:

Open it up and view source to see what I need to add for html text to make this work for me.
Looking forward to your response.
Thanks.

Dani AI

Generated

— the symptom you describe is usually caused by how the PDF is being served, not by the link text or simple HTML. The browser or plugin will force a save dialog if the server sends the file with the wrong headers (for example a Content-Disposition: attachment or an incorrect MIME type). Before changing UI, confirm the HTTP headers the PDF actually returns.

Quick check (run from a terminal or use Developer Tools -> Network):

curl -I https://yourdomain.com/path/to/file.pdf

Look for Content-Type: application/pdf and either no Content-Disposition header or Content-Disposition: inline; filename="...". If you see attachment the browser will offer Save instead of showing/printing.

Server-side fixes you can apply

# in .htaccess (Apache with mod_headers)
AddType application/pdf .pdf

<FilesMatch "\.pdf$">
  <IfModule mod_headers.c>
    Header set Content-Disposition "inline"
  </IfModule>
</FilesMatch>
# simple PHP stream (if you serve PDFs through PHP)
header('Content-Type: application/pdf');
header('Content-Disposition: inline; filename="coloring.pdf"');
readfile('/path/to/coloring.pdf');
exit;

If changing headers is not possible, embed a viewer that gives a consistent print control (for example a JavaScript PDF viewer) instead of relying on the browser plugin. A convenient pattern when you control the file and origin is to load the PDF into an iframe and trigger printing from a user action:

<iframe id="pdfFrame" src="/files/coloring.pdf" style="width:100%;height:800px;border:0"></iframe>

<script>
document.getElementById('printBtn').addEventListener('click', function(){
  var f = document.getElementById('pdfFrame');
  f.contentWindow.focus();
  f.contentWindow.print();
});
</script>

Notes and troubleshooting: automated printing can be blocked by plugins or cross-origin policies (the iframe must be same-origin for contentWindow.print() to work reliably). If a host or CDN injects attachment headers you may need host support. This approach complements the viewer/plugin observations from , and the local-print idea from @Alaisater by addressing the server and embedding side, which is the most reliable place to fix user-facing print behavior.

Recommended Answers

All 3 Replies

It's most likely a problem with your browser/acrobat add-on. Works just fine.

The browser plug-in should show a pdf option bar on the pdf itself (bottom, centre) when the mouse is over it, and that includes a print option. Not all browsers do this however. Chrome does, and allows printing from the normal print menu, as does IE9 and IE8. Firefox shows the pdf menu but my copy didn't want to open the browser print option.

Printing a web page to a PDF is very easy with doPDF. Just open the web page in your browser and select the Print option (File->Print... or pressing "Ctrl+P"). If you didn’t set doPDF as your default printer when you installed it, in the Print option you can find it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.