We Keep Coding

on click of button convert html page to image and download using JS ,Jquery

I have created a invoice based html page which has a button. onclick of the button, the html page should be downloaded as a image. using javascript or jquery.

I don't expect this to be the best answer, but it seemed interesting enough to post.
Write an app (may be with PhantomJS) that opens up the desired HTML document, sizes the window properly, and takes a screen shot. Then, remove the borders of the image.
(OR)
HTML2Canvas exists to render HTML onto (which you can then use as an image). (This may be of some help after converting to canvas - how to save canvas as png image?)

Generate PDF of a section of a php page once rendered into HTML and CSS and account for pdf page-breaks

The system I am working on has a questionnaire in it and then shows the responses to the admin in a nice report on screen. I need to create functionality that turns the on screen report into a pdf, similar to how the browser generates a pdf of the page when you select print. Although I need to only turn a section of the page into pdf. And it would be ideal to be able to alter the HTML so that the pdf page breaks don't interfere with the presentation of the report.
You can download a pdf of how the report looks, generated by the browser functionality. This is just an example, I need the pdf to be generated by a link or button and not include the whole page (the top part in this case).
I have tried some php HTML to pdf generators, but it's difficult because the HTML is dynamically generated so I'm not sure how to send all the HTML, once rendered, to the page that creates the pdf.
To overcome the page breaks, I've considered using javascript or jquery to read the height of the div of each question within the report and then write a simple script to calculate if the next div will fit on the page and if not add a margin on top of that div so that it starts on a new page.
What software can I use to generate the pdf, given these requirements? Either php or javascript. Appreciate the help.

Have you considered Snappy for PHP? It makes use of wkhtmltopdf behind the curtains to convert any HTML document into PDF.
We are using it and it works great.
https://github.com/KnpLabs/snappy

You could try mpdf and use the page-break-inside: avoid property which is actually a CSS property. I have not used this, but it might be what you're looking for.
Looks like you can add this property to the <div> and <table> tags (mPDF Supported CSS).

Need to scroll to a specific line in a PDF embedded in html page

I am looking for a solution where in I am able to move to a specific line in a pdf embedded in HTML .
At the moment I am using object tag to display the pdf in html page .
I know by using open parameters I can scroll through a pdf to a specific page but I am unsure how can this be achieved for a particular line navigation .
Open parameters example has been shared in the below mentioned question link but I need some parameter which helps me reach a particular line in PDF may be using some co-ordinates if that's achievable.The requirement is to scroll a PDF to a particular line and only the PDF should get scrolled not the original HTML page.
How to move the scroll bar of the browser on a pdf file with ASP / Javascript?
I can use any of the JQuery PDF viewers as mentioned here :
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
in case your solution uses them .
Please note I don't want to move to a particular location in an HTML page as mentioned in below post rather its about navigating to a particular line in a PDF embedded in a page.
How can I scroll to a specific location on the page using jquery?
Any help or leads would be really appreciated .
Thanks in advance.

Create a destination in the PDF file (assuming you are the one generating it) at the appropriate line, and add #destination to the end of the URL
See https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html#OpenaPDFfiletoasetdestination for an explanation on linking to PDF page numbers and destinations.

Assuming you don't have access to a PDF's source, you can open to a page by adding &page=pagenum to the URL as noted at link html pdf page. You may also want to look at this question.

Creating a Simple Layout/Style Editor

I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.

The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live

Embedding dynamically sized webpage with javascript

Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.

If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.