Exporting a div's content to PDF - javascript

I know that there are a number of points regarding this question, but I just can't find what I'm looking for so I hope someone can answer me. So, what I'm trying to do is:
imagine you have a div that is 400 X 400 px. The user uploads an image and enters text via input[type="text"] and all of it is shown inside that div. I want to export all of the content of that div in a PDF, possibliy by JavaScript (jQuery) od PHP. What would be the best way to do it?
If anyone could show a small example (code), I would appreciate it!

You can use these jquery plugins
https://github.com/mozilla/pdf.js
https://github.com/MrRio/jsPDF

Maybe you could combine the PHP-Printer functions-api (http://www.php.net/manual/en/book.printer.php) with a software like, for example, PDF-Creator (http://sourceforge.net/projects/pdfcreator/).
But this would imply that PDF-Creator is installed on the system of the user.
It's just a general idea ...

You can generate a PDF since a HTML page, with the WeasyPrint package. It's very easy to use and its most speed that javascript.

Related

Is it possible to print an HTMLdocument with a generic (text only) printer?

I have an HTML document with tables and inline CSS to align text, specify width and font weight.
I tried to print the html document with a generic printer (Bixolon srp-275ii) and printed all data without any format.
I wonder if it's possible to print the document in HTML format with a JS/JQuery pluggin or do I need to convert it to PDF?
Im currently experimenting with Electron and trying to create a POS desktop app with silent printing to the receipts.
Any help is welcome!
After a quick Google search I saw https://www.npmjs.com/package/html-to-text which looks like it probably could do what you want and it is in Javascript :)
I have not actually tried it myself, but I hope it works well for you.
For HTML document, you can try using tray, instruction is in their Github wiki: https://github.com/qzind/tray/wiki/2.0-Pixel-Printing#html-printing, but note that this still required you to install an additional plugin to the computer

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.

Inserting Text Into HTML

What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});

Smallest WYSIWG editor you can find?

I am searching for the smallest WYSIWG editor i can find.
I have tried TinyMCE, CKEditor etc. but i can not find a small one, all has hundreds of kb js files to load.
I dont need image upload etc, even if i like the one Stackoverflow using so think i need some that more shows like Word but really basic features.
I am using jQuery in the project and i it is a ASP.NET MVC 3.0 project but i really like jQuery and normal html instead of ASP.NET components.
But i am open for ideas about everything that are really basic and tiny size.
Someone has any idea?
Here you go:
<p contenteditable="true">Editable text!</p>
Admittedly it's not the most fully-featured editor out there, but it's certainly basic and tiny.
The smallest one I've found is CLEditor: http://premiumsoftware.net/cleditor/
Have you tried http://www.aloha-editor.org/index.php ?
try this
http://www.wyzz.info/downloads_page.html
Check out TinyMCE. http://tinymce.moxiecode.com/

How to view all html content using Javascript?

I am trying to find a way to save all html content from a webpage to a variable. This should work even if the webpage has frames in it. By current best solution is:
javascript: alert(document.body.outerHTML);
Just paste the code into the control in your browser where the url is placed and push enter to see the result. Any idea how to do this?
You should cycle over all the frames and ajax-load the content.
Somethings like
document.getElementsByTagName('frame')[0].src
to get the source. But I strongly suggest you to use library to help you out. In jquery can be quite simple task. Cycle over all frames, than $.ajax request all the externals source and build it (replacing the relative section)
But, as pointed by smeg4brains, innerHTML can be your way.
Here is the direct answer to "how to do this":
Having this in the address bar just press Enter and you'll see the contents in alert dialog.
To see contents of frames you'll have to iterate them separately it won't be part of the HTML.
Does this work?
var copyOfHtml = document.documentElement.outerHTML
alert(copyOfHtml)

Categories

Resources