I know there are some posts out there, but I have not found a sufficient answer to this fundamental issue.
I want to send my customers an email with an attached PDF file in which they can find a nicely designed overview of their booking.
Problem 1:
That overview is can be rendered by my frontend with AngularJS very easily (including complicated logic with translations, timezones, ...) - the logic exists. Therefore, I want to let my frontend produce the HTML, that I place into the PDF file. I would have to teach my NodeJS server the whole logic too, which I want to avoid.
Problem 2:
How do I get my HTML code (including CSS) displayed in a PDF correctly? I have seen jsPDF and PDFmake but none seemed to work the way I wanted. They rely on html2canvas to create a canvas object from my HTML code and put it on the PDF as an image. If your "image" is bigger than 1 page, it gets even more complicated. In addition to that, the scope did not seem to be correct. The resulting image did not contain the defined div-element completely but other parts of the page instead.
I am sure many more people need something like this so I am looking for a simple, straight forward solution.
Summary: I want my rendered HTML + CSS from the frontend put into a PDF file.
Edit: Having a screenshot of the resulting HTML as html2canvas would do, is not optimal. Because the user cannot interact with the content (e.g. select text).
Related
I've searched to the best of my capabilities, haven't found an answer.
I'm trying to save pages like this:
http://www.folkbibeln.it/?book=1joh&chapter=1&verse=1
To separate html pages, and keeping the format. I could take each page, copy, paste in a word processing software and save as html, but it would take hours upon hours. I'm thinking there might be some code I could use to automate it? I just can't figure it out, since it's not acting like a straight up html site.
Python is the language I'm using generally.
As an brute-force approach you could use a Headless Browser to load each page for you and save it to a file.
But as mplungjan already mentioned, all texts are in js-files.
You could save these files to your disk, then take the script that builds the html-page and write a little nodejs script that builds all the html-files for you. (Take the original script as a template.)
But nodejs ain't python
Depending on what you're trying to do with the texts, it ain't hard to convert these js-files into JSON and parse it, or directly into a python datastructure that you can import and process in some script of your choice.
Edit:
On a second Look, I just saw this: http://www.folkbibeln.it/chapters/1joh1.html
There seem to be the files you want as plain html, you just have to download them.
All the text is in JS files. You load the URL you gave us. Click ctrl-s and choose Web page complete. Then you will have ALL the text in the folder 1 Joh 1 – Svenska Folkbibeln_files You cannot save as formatted text unless you render the JS in the js files
I've read a lot of related answers but I still don't see the problem. I think MY problem is that I don't have a good grasp of the basics of HTML and potentially javascript. I'm talking about how they are stuck together and operate, not the particular language syntax. Perhaps somebody could give me the big picture explanation of what is going wrong here.
I'm using a simple WebBrowser control to navigate to a web page. This results in everything displaying correctly. Now, I'd like to save that HTML content locally on the machine and open it again later, then render it in another WebBrowser control. This has not worked so far. The page renders briefly but without images and effects, then I get an exception regarding scripts. So I decided to do a very simple test. I would get the HTML from the browser, then immediately read that text back into the browser.
After navigating to the page successfully, I get the HTML text as follows:
string html = myWebBrowser.DocumentText;
I then immediately set the DocumentText property to its original value.
myWebBrowser.DocumentText = html;
This gives me the same error and effect as if my other application was reading the saved HTML. So what is going on here? The browser initially shows all content successfully but then extracting and reloading the HTML text breaks it all. I must be missing a very obvious and basic concept here. Is it that the WebBrowser control's DocumentText property does not actually return the original HTML code, but rather a modified version? Or is it that setting that property modifies something? Is it neither? Thanks to anyone who can sort out my understanding of how all this works.
This is by design. HTML is not a fully inclusive file. The browser will parse the html and pull resources from other urls including scripts, images, styles, etc. If you save only the html and then open that file in a browser, many of the resources will not be found since they rely on the html loading them from their location relative to the html file. Once the file is on your computer, any relative link to a resource will be invalid resulting in the browser only showing the basic html and any resources that have been referenced by absolute paths and not relative paths.
I need to create a single html where the person can input text in text fields, then click a button and save the file itself, so he wont lose changes. The idea is similiar to what wysiwyg does to html documents, but I need that to be implemented on the doc itself.
Where do I start from? I can't find anything like that on Google, perhaps I'm searching the wrong therms.
Need something that uses HTML + Javascript, no server side scripting.
JavaScript alone does not have the ability to modify files on your file system. All browsers do this for (good) security reasons. You will not be able to make changes to the html document itself (but according to the comment by Sean below, you might be able to produce a new copy of the document).
You might try using cookies to store the input values (automatically write them and load them when the document opens). There are various jQuery plugins available to aide in reading and writing cookies.
In business or enterprise systems this is usually done with a database, which would require server-side scripting.
I think most of these answers are incorrect. Using the FileSystem API, content is only saved to a sandboxed hidden folder, the user has no control as to where it is saved.
As suggested by Sean Vieira, using TiddlyWiki is a good solution.
However, if you want to customise it, you can make a Flash/JS bridge in which the Flash SWF saves the actual content.
I intend to create an HTML report from a perl script on Linux/Unix side. The report contains various statistics mainly in the tabular format. Since there are many such tables I want to split them into categories using Tabs. The report then will be sent to some email-ids, as an attachment.
The questions are:
Is there a good example of HTML + Javascript to create such tabs? I could not find a complete example
Libraries like jQuery fits the bill except that I need to give the .js file as well, which becomes a bit tedious. Is it possible to somehow embed jQuery (or any other library) in HTML?
Thanks in Advance!
I hope this answers your questions
Use jQuery UI which is an extension of jQuery library, Or you can use ExtJS
and there are lots of UI library depending on how much you want.
Why does giving JS file become tedious ? use script tags to call the external JS files to use these libraries. Embedding JS in your HTML will clutter it and its a BAD practice.
Checkout
jquery's tab example :
http://jqueryui.com/demos/tabs/
ExtJS tab example : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tabs/tabs.html
EDIT:
If you are planning to use JS in emails, forget it. A lot of email clients remove JS content.
Instead
Share a google spreadsheet link with email
Generate a PDF that has the report, there are a lot of libraries that convert HTML to pdf , use them and convert an HTML table to PDF.
Take a teaser approach to this one where its a hybrid of INLINE html + actual links to go to real content.
Just take a screenshot of the real tabs and place as the header image in your email
Below the tabs image, place only the first page of the tab content
Upon clicking the tabs in the email it takes them to the actual page
The URL can be tokenized and be HTTPS so it will be somewhat secure to view via link
The real tabs can use jQuery UI as others have suggested.
Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.