hwo html, css, js integration in the browser actually works? - javascript

I'm a person who comes from algorithm and data structures background (in c++, c, Python, Java and etc.) and my only experience in frontend is Processing and p5.js. How browsers integrate html, css and js?
Do Javascript scripts generate a new .html file as page at certain framerate? How does it really work inside the browser? Or do most popular libraries like Angular make "syscalls" to the web browser to generate content?
Does using libraries like Angular etc. make generating new html "frame" documents somehow automated for dynamic pages?
I mean apart from all Javascript operations isn't the final displayed content a html file in the end?

Related

Converting HTML Template to pdf in JavaScript

I am currently using weasyprint to convert a HTML template to pdf. Now my company has decided to move from python to javascript for increased user experience or something.
Is there a PDF renderer in JavaScript that can do the following:
Use data on the client. I have data that under no circumstances can be transferred over the internet. (That is the reason I can not create the pdf on backend side or use external renderers.)
Use CSS page numbering
Use features like page headers and footers on print medium.
And of course can do the usual CSS layout.
Ideally there is something that can be used in python and javascript. But Weasyprint works great with python, so I can keep that if there is no "one tool to do the job everywhere".

What functionality is the java code responsible for within the GraphEditor in the mxgraph example for javascript?

I am studying the grapheditor example under mxgraph's javascript https://github.com/jgraph/mxgraph/tree/master/javascript/examples/grapheditor
However, I notice there are two parts. There's a javascript/HTML portion in the www folder. And there's a java portion.
I am a bit rusty from my Java, so I cannot be sure what the Java code is responsible for.
Does the Javascript and HTML portion be totally responsible for the UI/UX display of the GraphEditor example?
Meaning to say things like displaying the action menu and drag and drop etc are handled by the javascript and html portion?
So what's the Java code responsible for exactly?
The front-end part is only client-side JavaScript and HTML. The Java back-end is partly historic for older browsers that couldn't do things like open/save locally without echoing the file via a server.
There's also export functionality on the server. A long time ago browsers couldn't generate raster images (like PNG) locally, so the server had to do it. Now IE 11 is the only supported browser that cannot do this.
There's also PDF export, no browser can currently do this, so that's always generated on the server. See https://github.com/jgraph/mxgraph/blob/master/javascript/examples/grapheditor/java/src/com/mxgraph/examples/web/GraphEditor.java

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

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.

How can I crawl an HTML5 website and convert its HTML content to PDF (using a Python or Ruby library)?

I'm looking for an engine/solution/framework/gem/egg/lib/whatever for either Ruby or Python to log into a website, crawl HTML5 content (mainly charts on a canvas), and be able to convert it into a PDF file (or image).
I'm able to write crawling scripts in mechanize so I can log onto the website and crawl the data, but mechanize does not understand complex JavaScript + HTML5.
So basically I'm looking for an HTML5/JavaScript interpreter.
This question is a bit confusing... sorry re-read my answer after reading the question again.
Your question has two parts:
1. How can I crawl a website
Crawling can be done using Mechinize, but as you said, it doesn't do Javascript very well. So one alternative is to use Capybara-webkit or Selenium (firefox / chrome).
Usually this is used for testing, but you may be able to drive it using Ruby code to navigate the various pages.
2. How can I convert the output to PDF
If you need to convert the crawled content to PDF, I don't think there is a way to do that. You may be able to take a screenshot (useful for testing) using Capybara-webkit or Selenium, but converting that to PDF may be just a matter of pumping it through some command line utility.
If you're looking for a true HTML to PDF converter (usually used to generate reports from views in a rails app), then use PDFKit
Basically it's a WebKit browser that can output to PDF. Really simple to run with.

Categories

Resources