Convert HTML to PDF using jsPDF - html

I have a html page having some static text as well as some controls like dropdownlist and textbox etc along with a button e.g., "Download as pdf".I need to generate a pdf file using angularjs taking the selected value of dropdownlist and value of textbox etc alongwith static content.
The page also uses some external fonts in addition to custom CSS. I need all these in my pdf.
Is it possible in jsPDF?
I tried using fromHTML():- but it only prints the text of text nodes only.
Then I tried using some built-in functions like setFont(), setFontType() etc. I also tried addFont(), but I couldn't figure out what to be passed in font style.
I even tried adding my font in the standardFonts array of addFonts() function in jsPDF library and install my external font in the system(windows folder/fonts). But it's not working.
As jsPDf has some limited designing features only, it is not meeting my requirements.
Is there any other strong tool which I can use?

Related

Format html using Quill Editor

I’m using quill editor in my template and the editor’s content is bound via [(ngModel)] to a variable in my component which is basically a text with some html tags in it. What I discovered is that if I change the variable’s value the quill editor formats its text and replaces all occurrences of the <div> tag with <p>. In my case this turned out to be very useful and I’d like to understand how this works and how to emulate this behavior in my Angular component to use it for formatting other text values? Is there a way to dynamically pass text to Quill and then get back the formatted value, e. g. via a method call on the editor?

React-Quill delta to html with custom css without using any package

I'm using react-quill as a text editor and then sending its delta.ops object to my backend.
Now I want to generate HTML from that delta.ops in the frontend without using any external package/library.
I tried some PHP approach from one of the solutions available but the problem is that by doing so I'm not able to add my custom styling to those elements.
suppose I have <strong>hello</strong> now I want to change its font-size and maybe color but unable to do so.
Any help would be appreciated.

Create custom templates using ckeditor, tinymce or any online editor

I am not sure if the title represents what exactly I need to do, But here is the details. I am building a website using PHP that allows people to create different templates, then they should select one of them and then fill the fields to fill the placeholders. For example consider the following image
The name of the recipient could be a placeholder so some part of the template can be
Dear {recipient}
{body}
and I prepare two fields for recipient and the body and it will be replaced by the value of the corresponding field. I can do this. What I can't do is how to let the user to align the placeholders in the paper. For example there is a placeholder for the date that must be at right of the page, or any other placeholder that can be place inside the paper (same as the following image). I would like to know if ckeditor or any other editor allows me to create such template?
The structure of the template must be kept in A4 or A5 print page.
I’m having trouble understanding your question. If you're looking for templates in TinyMCE editor, I think you should try using template plugin for tinymce - there is one for wordpress. You can write your own plugin too, there was question about it.

How to use RTF content is jasper report

I am using Jasper Report 5.6.0 + JSF 2.2 + Primefaces 5.2
My problem is in detail band (content) of the jrxml I am passing RTF from pe:ckEditor here. This editor have many rich components e.g. tables, radio, fonts etc.
In generated document many styles escaped automatically. like table or font. While that text-field markup is html.
More: font will be changed if i generate html instead of pdf. and my rough guess is if any font that is not in JasperReport -> iText library it will escaped automatically
To render RTF text you use markup="rtf" on the textElement, however you will not be able to render tables, text alignment, box's ecc.
This feature is only for producing styled text., how the text looks (bold, size, color ecc.)
What are your options?
Convert to html and use the HTML Renderer Component, note neither this is perfect since it will renderer and image of your html (problem with overflow and size).
Create your own RTF component, I have not seen an RTF Renderer Component and I don't think there are any open tracker for this feature request in the JasperSoft Community
Parse the RTF in java and use dynamic jasper to generate your report (or subreport relative to the RTF)
When generating pdf, if font extension is not provided , iText will use (quoting #Bruno Lowagie) "its best effort" to render your font, this often is not enough. Consider adding font-extension to your project
Check list for rendering font in pdf using jasper report
How to add font extensions using iReport or JasperSoft Studio
Note: If you are using the HTML Renderer Component this will not be needed since it is rendering an image.

Localizing a Google Chrome Web App

I'm trying to add localization support to a Google Chrome Web App and, while it is easy to define strings for manifest and CSS files, it is somewhat more difficult for HTML pages.
In the manifest and in CSS files I can simply define localization strings like so:
__MSG_name__
but this doesn't work with HTML pages.
I can make a JavaScript function to fire onload that does the job like so:
document.title = chrome.i18n.getMessage("name");
document.querySelector("span.name").innerHTML = chrome.i18n.getMessage("name");
but this seems awfully ineffecient. Furthermore, I would like to be able to specify the page metadata; application-name and description, pulling the values from the localization files. What would be the best way of doing all this?
Thanks for your help.
Please refer to this documentation:
http://code.google.com/chrome/extensions/i18n.html
If you want to add localized content within HTML, you would need to do it via JavaScript as you mentioned before. That is the only way you can do it.
chrome.i18n.getMessage("name")
It isn't inefficient to do that, you can place your JavaScript at the end of the document (right before the end body tag) and it will fill up the text with respect to the locale.
Dunno if i understand exactly what you are trying to do but you could dynamically retrieve the LANG attribute (using .getAttribute("lang") or .lang) of the targeted tag and serve accordingly the proper values.