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.

How do I create a link in HTML and CSS which will populate a div or other element with an html file?

It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!

So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)

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.

How to save a part of a HTML page to the user's computer

I want to let a user save a pre-defined part of a website to their computer in probably pdf format with some different css styles applied.
I have done the same for printing, but I couldn't find any examples for saving.
How would I go about doing this?
The specific parts are in their respective divs and ids.
Thanks

You'll need a library to do this.
depending on the language you're using, there's a lot of possibilities. Even google chrome itself print pdf from html.
Give us more details about your project

Image swapping, data hiding, javascript and SEO

I'm working on a product web page. This product page has multiple attributes such as size and color. I'm working on building an image swap script (jQuery) that will swap the main image on the page based on events.
Easy enough and there's a million tutorials how to do that.
Where this gets less trivial is the attributes. I want to be able to swap images based on the aforementioned attributes selected.
First, the page will display an image that has been set as "default" for a given product.
Second, if someone clicks "size: large", it will show the image that's set for size large.
Third, if someone clicks "color: red", it will pull the "large : red" image and swap it for the main image.
Fourth, if someone now clicks "size : small", it will fetch the "small : red" image file.
Fifth, if someone now clicks "color : blue", it will fetch the "small : blue" image file.
You get the idea.
I have a database with the size:color table. The question is, what is the best way to get this data in the HTML page so I can load it into JavaScript?
I want to avoid an AJAX call because of the extra network overhead and the page load will have already accessed the database and gathered all the data, I don't want to call the database again and have it do all that work a second time.
I could hide the data with CSS (display:none) in the liked elements, but I would be concerned with SEO. There's a bit of data to hide. There's thumbnail image URLs, standard size and large size. I certainly wouldn't want to save it as JSON format like that and just display:none.
I thought maybe saving it in HTML comments and using the jQuery comments() plug-in. I have concerns of speed and feasibility.
Any thoughts on how people best store data in the HTML file to access with JavaScript to build some nice page experience effects?
---- EDIT ----
Having slept on this, I'm thinking that I'm over thinking this whole thing. This whole time I'm trying to figure out how can I add all this product image information into HTML so JavaScript could use it add effects, when all I think I need to do is just have my PHP spit out the image/attribute table as a JavaScript object so I can use it. Instead of trying to figure out some way to re-load it from HTML. Which is just over thinking the whole thing.

You can spit out the page with a JavaScript block that contains the data for the product in JSON format.
Alternately you can get clever with class names and put the data in there: red_A12345 would parse out to red image = "A12345.jpg"

see my edited comment -
I found that creating a JS variable/object via PHP worked quite well for passing the data to JS so I could create a JS app that did the image swapping complexity as described above.
I use Zend and jQuery as PHP/JS frameworks so the code sample will reflect this. But the concept will work for any development platform:
// parse the object into Json in PHP to pass to JavaScript, using Zend_Json
$jsonSource = Zend_Json::encode($dataObject);
// parse the Json in jQuery as a JavaScript script
$script = 'var imgTable = jQuery.parseJSON(\'' . $jsonSource . '\');';
// append the script to my Zend_Framework template so it prints out
$this->view->headScript()->appendScript($script, $type);
In addition, I think I'll be looking into the practicality of doing this for building a dynamic check-box web-form that will enable/disable form options based the current inputs and if there are any results available for future options, based on current options selected.