How to generate pdf from html and css in Vuejs? - javascript

I'm working on a tool "Resume Builder" using Vuejs. Is there any bettter way to generate pdf ( of resume ) from html with css . I have used jsPdf Library but not getting desired outcomes. I want to keep html "a" tag clickable in generated pdf. I have also tried html2canvas.js but in that "a" tag is not clickable due to image in pdf. jsPdf is generating pdf but not applying css.

I recommend you to investigate a bit different approach for generating PDF from HTML just because all the client-side libraries for HTML to PDF generation have lots of problems when generating really complex documents with lots of formatting etc.
The alternative way is to perform the PDF generation itself on the server-side. For example, you could make use of Headless Chrome managed by your backend for turning any HTML into PDF.
We used a very similar approach to implement pdf generation for this free resume builder service. The only downside we faced was that different browsers like Firefox or IE might occasionally display an HTML document a bit different than it's printed out as PDF bu Chrome. Good luck!

You might want to give Pdf Make a try.
PDF Make on Github
It has support for styling and links. But you have to do most of the styling yourself.

I found Kendo UI is the best api for pdf from DOM.
https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom

Related

Download page as PPT in JavaScript

I am planning to create a React frontend which handles HTML presentations. Besides letting the users present online, they should also be able to download their HTML presentation as PPT (like Google Slides).
I have not yet decided on what package to use for creating the presentations, but most of the packages seem to only support the typical print-download (the PDF that is converted from the HTML when you press cmd/ctrl + P). One exception is PptxGen, but that package is not an option for me (because of reasons not related to this question).
Is there a way for me to download a HTML page to PPT?
(There are multiple ways to download html to PDF - jsPDF being one. If it's cumbersome to download html as PPT, perhaps it's possible to converting html -> PDF -> PPT and then download it? Any advice?)
Thanks in advance!
Even after extensive searching, I did not find any other open-source library that handles direct HTML-to-PPT conversions, apart from PptxGenJS, so we can conclude that if you want a direct conversion, that's your only option.
There are some other ways to do this though, one that you mentioned is converting to PDF, then to PPT. I have found a service that can do both conversions, called Cloudmersive. They seem to have a free tier, and a Javascript API client that you can use from your frontend, so this is probably worth giving a try. If this managed service also doesn't suit your needs for any reason, you can still handle the conversions yourself, for example, with jsPDF and
pdf-officegen.

Creating PDF from html template in node js

I have a requirement that I need to create a PDF. For me the best way is to do it render html template and create a PDF with any third party lib. I have come across the solution which render HTML with ejs and create pdf with html-pdf. It works fine though but I had a problem with a page break.
There is a popular module pdfkit. But it uses it own concept and procedure to render pdf. For node it does not render html file but for python it does render html template.
Please tell me how can i render html template to pdf using pdfKit and also what is the best way to render html and convert to pdf ?
Thanks
Puppeteer is the best way for converting HTML to the PDF, and also for web scraping.
A short instruction for generating PDF from HTML You can see here
Also, the Chrome DevTools team maintains the library, so it is the best solution.
About the page-break. This issue can be solved in the HTML code. There is a style option for solving the issue.
style="page-break-after:always;"
The problem with using PDF converter libraries available on NPM like pdfkit is that, you gonna have to recreate the page structures again in your html templates to get the desired output.
One of the best approach to rendering html and convert to pdf is by using Puppeteer on NodeJs. Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It can be used to generate screenshots and PDFs of html pages in your case.

Exporting web page as PDF

I have SVG images, and lot of text with inline CSS, in an HTML page. I need to export all of them into PDF. Suggest to me proper technology which caters to my need. I am using JavaScript and jQuery as front end and Python as backend.
UPDATE:
I have tried jsPDF, but it is not preserving the CSS styling and I am not able to export images also.
Do you know the wkhtmltopdf command line tools? I was in a project where I also needed to convert a web page to PDF and I used this library (I used PHP as backend) and it worked very well for me.
I hope I have helped :D
If you want to do it server-side, there's a python package for that:
http://weasyprint.org/
Otherwise, you can do it in the browser but you will loose the CSS.
jsPDF appears to have experimental support for converting HTML to a PDF, or you can programmatically populate a PDF document with similar content. SVG is supported via plugin.
Demo:
http://rawgit.com/MrRio/jsPDF/master/
Github:
https://github.com/MrRio/jsPDF

how to generate a pdf file of an html page through java script programming

In my html5 hybrid iPad application i am generating a report in one of the pages . What i want is to generate a PDF file of that report and save it in ipad.Please help me with this. I am using JavaScript and mobile jQuery for this.
It is highly inefficient to do this client-side(via Javascript). You should consider doing it server-side(using PHP, ASP/.NET or such). PHP uses a service called iTextSharp for this, PHP uses DOMPDF.
If you want to it with Javascript, http://html2canvas.hertzen.com/ is the best tool you will find! It uses the DOM style to generate an image. The only thing you need to do is then wrap it in a PDF. Have a look at their examples! For example:
http://html2canvas.hertzen.com/examples/artificial/index.html
You can use an open-source library for generating PDF documents, I have already use this library and works fine:
http://code.google.com/p/jspdf/
Try it, I hope that is what you want

Embedded Javascript

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.

Categories