Develop Reference

I want to generate page as a single pdf file without page break

Hi i want to generate a pdf of big page as one single file without page break.
Below image shows page break upon download(that i want to avoid, want to download as single page).
Question: i don't want to split the page upon download as multiple page. but want a single page.
here is what my working example look like codesandbox demo
Note: any pdf generating plugin is fine for me, if it works.
Please help me thanks in advance !

Your current styles do not make it easy to set the page media there are just too many conflicts in A4 layout so you need to reconsider the output as A3 or A2 as seen here 4A4 printed without any code box controls, or scale down your output to fit on the A4 page you have set.

Have you considered an API rest service? Restpack HTML to PDF has a free trial. Worth a shot to see if you can get the correct formatting. The API call's JSON body allows you to specify the px length and width you want. This should avoid pages breaks if you size it correctly. You can read their documentation here

You can use the CSS properties break-before, break-inside and break-after. In your concrete example, adding this CSS rule avoids all the flex containers splits:
.flex-container {
break-inside: avoid;
}
Please note that there are some limitations to these rules, and some browsers might produce different results too.

The PDF standard
The PDF file format standard was built on a page descriptor language and created for documents with defined page sizes.
This means that a valid PDF file does not support unpaginated content.
So what?
It may be achieved in some unsupported manner, but circumventing the standards will usually result in unpredictable behavior across different viewers.
You may be able to generate one big non-standard page size, but that could also be a potential problem in some PDF viewers.
Still want to try?
It's up to you, go ahead, but what ever you do, make sure you test your output files well.
Preferably with several of the most popular PDF reader/viewer applications before distributing them.
Unless you want to publish files that may turn out to be useless to your intended recipients.

Use one file to display to lots of webpages

I'm building a simple webpage. However there are a few dozen sub pages. The way this guy organises his business means the phone number is constantly changing between those in charge of taking calls any given week. Is there a way I can change a single line of text (say in a css file) and have the phone number posted on all the sub pages change every week according to who is in charge of taking the calls?
Since then I've learned just enough to change the template from a messy html/table code to a more streamlined look to the code using css.

You COULD potentially do it via the ::after pseudo-element if this fits your browser support profile: http://caniuse.com/#feat=css-gencontent
Note that IE8 (the only 'common' browser without support of ::after instead of :after) is EOL early next year (and there will be much rejoicing).
While this is an absolutely terrible way of doing this- you're supposed to use CSS for presentation not information, I'm not gonna tell you don't if this is just a temporary hack to save yourself a headache while you implement something less terrible.
Sample of how-to: http://dabblet.com/gist/b4bd30443cdbd810d8a8
Call <span class="data-onCallPhnNum"></span> for help.
.data-onCallPhnNum::after{
content:"(555)-555-5555";
}
Should note that the primary disadvantage of this is that there is no fallback if the browser cannot render the ::after pseudoelement.
Better yet, you could include a Javascript file like this:
[....]
<script type="text/javascript" src="phonenum.js"></script>
</body>
</html>
and having the js in phonenum.js (and its expected HTML use) be:
(function(){
var phnNum = "(555)-555-5555";
var phnLnks = document.getElementsByClassName("data-onCallPhnNum");
for(var i = phnLnks.length >>> 0; i--;){
phnLnks[i].href = "tel:" + phnNum;
phnLnks[i].innerHTML = phnNum;
}
})();
Call the number listed on our contact page for assistance.
This would accomplish the same thing, only not work on browsers with js turned off, has a natural fallback, has a clickable phone number for mobile viewers, and isn't using CSS for information.
You should still eventually move this into a database and have the number pulled server side, but for a hack to save on headaches before that real solution's ready, either'll do.
EDIT NOTE: Beers go to CBroe for suggesting the tel: protocol and the formalization of the fallback.

There are two other options, neither on is strictly an HTML solution.
Server Side Includes are one option, though they are falling out of favor.
Another option is using a server-side template system, such as PHP.

Print AngularJS application

We have a complex AngularJS-based application with different loaded stylesheets. I need to print the separate page with nice styling, exactly how it looks in the browser, plus several elements need to be opened via ng-show for the print.
Looking for potential existing solutions, I've found the following AngularJS directive: https://dzone.com/articles/building-simple-angularjs. I had to slightly update it to load css stylesheets. Eventually, when I click the Print button, I can generate the huge HTML file with css references in <head/>. Being posted directly into browser, it looks more or less nice, but:
Ng-show /ng-hide are fully ignored, and that is expectable. How to deal with it?
Mostly important - when I try to Ctrl-P this HTML, it doesn't looks nice in preview at all. What I'm doing wrong?

Is it possible to download a picture of specified HTML dom on mobile with JavaScript? [duplicate]

Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.

You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/

Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).

Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.

In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/

you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.

It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.

if some parts of the html are repeated in several documents, is it more efficient to load it in the js?

For example, say you have an information box that will be repeated in every single page. if i have this in the HTML, then every time i change it, ill have to change it in every single HTML file.
But if i load it in the javascript (as in the whole thing), then I'll only need to change the javascript. For example,
$("body").append('<div id="infobox">*whatever i need*</div>')
is this a better way or does it create more complications?
or are there more efficient ways to do this?

In short, no. You're on a slippery path there…
It might be more efficient for the person maintaining the page but you should really be doing this on the server-side as mohkhan suggested e.g. through a CMS or pre-processing if you're site is completely static. I assume that on your site, there isn't just an info box that's repeated — what about the navigational elements, the banner etc.?
There's nothing wrong with loading elements through JavaScript (e.g. to show counters, data, etc.) but you shouldn't be doing it for core content. Remember too that you shouldn't assume that everyone will have JavaScript enabled.