I have a "calculator" page that calculates a load of maths based on what the user inputs. The user can then click "get results" to show their full calculations.
I then have a button - "save as pdf" which I want it to allow the user to save a pdf of their results.
It's a combination of html, php, css combined with Wordpress.
How can I (on click) convert the results to a pdf and allow the user to save?
p.s I know this been asked a few times but I can't seem to find the correct answer or a working version... or a tool with good documentation for me to follow!
Check also FPDF
Generally these things are solved on the server. Clicking the link would trigger a redirect to the php page and in general instead of writing output to a webpage, you write output to a pdf stream (still arrives in the browser but the browser knows it as a pdf).
you do this by changing the response headers. you could use this library to write out the pdf file
http://code.google.com/p/wkhtmltopdf/ make sis pretty simple, you could do a curl request to the page, and send it to the library.
Related
I have a HTML page that contains a table with a list of a customers orders (pulled from a database via PHP).
I want to have a button on the page that will allow the users to download a PDF copy excluding the navigation bar etc.
The examples that I've seen and tested online initially load the page in PDF format but I don't want this. I want it to load as it currently is but also have a button that when pressed downloads a PDF copy (i.e. not display it in the browser).
wkhtmltopdf will do the trick:
http://wkhtmltopdf.org/
It should allow you a lot of customization options.
But if you want to generate it dynamically then you have to use some library for pdf . There are many library like tcpdf, dompdf etc.
Dom pdf example
From experience I would recommend Phantom JS - see an example
I found Phantom JS offers better HTML/CSS support when compared to wkhtmltopdf.
Bear in mind, you will struggle to get support for things like CSS3 columns in Phantom and Wkhtmltopdf.
Workflow:
Land on initial page (later to be converted to PDF).
Display button - 'download as PDF'
Listen for the click event on this button and call a custom callback
function once the event is fired.
The callback function executes an Ajax call sending the full page
HTML as part of the server request.
On server side, fire up Phantom JS or Wkhtmltopdf to generate PDF. Save
PDF on server.
Generate URL for saved PDF and display/load client side.
PS; I'm not sure if Phantom JS will generate a PDF from a string or whether it expects a valid url. I know Wkhtmltopdf can generate a PDF from a string.
Hope this helps
Since you ask for the easiest way.. just print the HTML client side. This button invokes printing the web page client side:
<input type="button"
onClick="window.print()"
value="Print This Page"/>
Then the user would have to select a PDF printer driver. Chrome has this built in.
Here you can read how to exclude parts of the HTML (such as the print button itself) from being printed:
How do I hide an element when printing a web page?
From last 6 hours trying best to show progress bar wile pdf is generated in TCPDF but not successful.
I am using TCPDF API for HTML to PDF generation, But the problem is that while generating the PDF we can't use custom javascript, Can we show progress bar while PDF is generated?
Any idea please?
I am not sure why you say "can't use custom javascript". If you just want a "loading icon" yoy should do this
- show loading icon (from js)
- ajax request to php file that generates the pdf into a server file
- on success you get a link to a generated pdf.
(for this solution you might try some estimation based on how large would be the generated file)
If you want an accurate progressive, you should add some estimation on php file. Let's say when you generate the pdf you know how many pages you will generate and each "addPage" command you save the status of completeness in a file or a memcached key. On you JavaScript side you call a file each second that reads that status of completeness.
No.
Even if you were able to use custom javascript, it would not be possible to get an accurate prediction of the time it will take to generate the document and therefore diplay progress - but it would be possible to get an estimate (based on extensive benchmarking). But in order to display the progress bar you'd need custom javascript and to change the processing to decouple the threads on the browser and server. This is discussed more in this question (which IMHO is not a duplicate of the post referenced).
Chrome allows users to hit Ctrl + P and choose 'Save to PDF'.
Is it possible to have this function through an html button?
I want the user to just hit a button and go directly to the Save as PDF prompt ( where the file name is set by PHP and not automatically by Chrome ). So the user basically just hits the button and clicks on Save on the prompt window.
Is this possible?
Can I skip the previous steps?
Nope, it's not possible.
But, you can give the user the choice to download a HTML file output as a PDF file. There are a few libraries around, Prince is the best but expensive, so check out DOMPDF.
By the time your user can hit ctrl+P in the browse, the PHP process that generated the page (on server) is already closed.
Besides the fact that PHP exerts no direct control over browsers. It just sends them information in the form of HTML/CSS and important in this case JavaScript.
With JavaScript you could trigger the normal print behaviour of the browser but you would have no control over it.
Another approach could be to generate the PDF on server and send it as a file to the browser. In which case the browser will either ask the user if he wants to open it or it will ask the user if he wants to download it.
I've personally used fPDF to customise the PDF invoices of various open source e-commerce software. Like for example PrestaShop.
All you really need to do is download the library from (fPDF](http://www.fpdf.org/), but seeing it in action and being able to change/adapt a working version might help you so you could look for the PDF invoice in a fresh the PrestaShop install inside the folder classes the file name is PDF.php .
I lost several hours trying to make conversion to pdf on the server with no luck because my view contains some jquery functions that do the main rendering. I thought of providing a button to save as pdf using the browser but then opted to using javascript on the client side to do the rendering to pdf. This may not be the optimal solution in certain cases but looked the most sensible one in my case.
there are many libraries I just started using html2pdf.js and it is working fine so far.
I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .
But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.
Does anyone have an idea, of what should I really read or search for?
Thanks in advance
The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.
What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.
The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.
One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.
Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.
(Of course, Firefox and Chrome all count as html renderers too).
In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.
I'd say this is a complicated approach overall. I'd go with what Iljaas' says.
Is there any way I can direct display PDF files in modal boxes?
I am using CodeIgniter PHP framework and jQuery as JavaScript framework.
UPDATE: I read on net that this is possible by loading it in iframe, and Adobe PDF will render it, but many seems to oppose, so is there any way I can convert those PDFs to images?
Short answer: No.
Longer answer: Usually, PDF documents are not rendered by the browser directly, but rather by some specialized PDF reader. As soon as the browser sees a content type of application/pdf, it passes the response along to the reader. Nothing you would do in your HTTP headers, HTML or JavaScript would make it across the gap between the browser and that other program, and the PDF format itself contains no switch to enable any kind of modal user interface.
Update: Rendering the PDF as an image would allow you to display the graphical content of the document in a more modal fashion. You still are not able to block the user from closing the browser, but you would be able to "lock down" anything else on your page while the image is displayed.
Related: How do I convert a PDF document to a preview image in PHP?
If you really want to, you can just embed it as a normal object. For example:
<object type="application/pdf" data="embeddedfile.pdf" width="500" height="650">
That's a bad idea. Always let the user set their browser to how they want to handle PDF files. So just create a link to the pdf. Modal windows aren't for that purpose anyway.