Client side JS templating - prepare pages for printing - javascript

I need to parse XML data and fill HTML(XML) or precompiled JS template for printing and then send it to print, all this work should be done on client side.
Is it possible and is some libs for this purpose available for JS?
Is it possible to rotate some pages for print. For example: first page in A4-vertical, second A4-horizontal.
What approach should I use if I start develop own lib? I'm primary work with Java, so I don't know how to build structure on JS, is it possible to write classes in different files and then compile in one JS (I know that in JS classes not available, but we can emulate something similar...)
PS: should work with ie6 ;(
Thanks

[Assuming your talking about client-side js in the browser:] To rotate the page for printing use CSS. there are two ways to do it:
specifying #media print{#page {size: landscape}}
rotating content using transform:rotate(-90deg);.
See this Stackoverflow answer for details.
There are a lot of special CSS commands for printing. Smashing magazine has an introduction.

Related

Dynamically Saving Images to a PDF template

I'm building a website where people can pick several pictures from a range.
I then want the users to be able to create a PDF using those pictures. However I want those pictures inserted in predefined positions and sizes in a template I have already created which will contain other predone materials (words pictures etc).
So my question :
its possible ?
Can anyone recommend a library which will satisfy my needs, I have had a look and I cant see any PDF libraries that seem to mention templates
Any guidance on where to start will be greatly appreciated.
Yes, this is completely possible.
I would recommend using wkhtmltopdf to generate the pdfs from an html template.
Another handy library for this kind of work is image.intervention
Both of these would work with PHP.
If you're working in javaScript you may want to use PDFKit
Edited: Only if you use php.
There are several libraries you can use to generate a pdf depending on what template you will build your pdf. I hardly recommend TCPDF. You can use html to layout the design you want or you can embed the image directly on a page. See an example here.

Attach PDF to PDF as attachment (not as a page) via Javascript in HTML (not in Acrobat)

I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language

How to make HTML design of a website extensible, reusable and flexible?

I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.

Use Javascript To Print Page As PDF (With Django)

I need to convert a web page to a PDF because it won't print/look correct if it isn't converted. This is because the web page is so big, that as an HTML document the browser will try and split it into multiple pages (not just vertically, which is fine, but horizontally, which is bad). Though I originally planned to do this on the server side with Django, I realized that virtually all of the available libraries were written for python2, when I was using python 3.
So my only other option is client side. The only thing I could find on stackoverflow was this: convert HTML ( having Javascript ) to PDF using JavaScript, but all of the answers were in Java, not javascript.
I think the most ideal solution would be to change the style so that it was more printer friendly rather than making it into a pdf.
If it really does have to be a pdf created with Javascript, there's a library jsPDF http://parall.ax/products/jspdf out there for creating pdfs with Javascript. You would have to write something on your own to parse the page to create a matching pdf.
If you can use php, I recommend using dompdf, which was written specifically to translate webpages into pdfs, so there would be much less work involved there. https://github.com/dompdf/dompdf I've actually used this library, and it seems decent, though it doesn't support all css styling.

Accessing Local Files with jQuery

I believe that this question has been asked in a few different forms, but I've read quite a few different responses.
At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.
I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.
So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...
You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.
EDIT:
Another technique you could use can be found in Javascript read files in folder
It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.

Categories

Resources