Rendering PDF from HTML. The rendered html with all styles applied looks like this:
When rendered with jsPDF it looks like this:
Ignore the font weights and notice the extra space between words
const pdf = new jsPDF()
pdf.html(renderToString(letter_html), {
callback: (doc) => {
doc.save('letter.pdf')
}
})
Is there a fix?
Related
I have a html div with some img src url inside it. The img part looks like this:
<div><img src="https://www.example.com//cover.png"></div>
I'm using jsPDF to generate the pdf:
new jsPDF('p', 'pt', 'a4', true).html(
document.getElementById('printDiv'),
{
filename: 'print.pdf',
image: { quality: 10, type: 'png' },
html2canvas: {
/*
scale: 2,
*/
},
callback: function (doc) {
doc.save();
},
}
However, it looks like the img only on the first page is not be showing. I guess img loading takes some time and happened after first page render done, I detected it by using html2canvas scale 2 so that the image pushed into 2nd page.
How can I fix the code to let the image on the first page being generated before pdf is rendered?
Wait with the jsPDF call until the image has loaded.
How to set pdf font size for table content using jspdf?
setFontSize doesn't work in my case.
Setting font size for text in a table using jspdf-autotable looks like this:
var doc = new jsPDF();
doc.autoTable({html: '#table', styles: {fontSize: 20}})
doc.save("table.pdf");
Edit this: jspdf.plugin.autotable.min.js
Find this part and edit fontSize: textColor:20,halign:"left",valign:"top",fontSize:10,cellPadding:5
the default size is 10 and I change it to 7:
textColor:20,halign:"left",valign:"top",fontSize:7,cellPadding:5
Before printing, make a copy of the table object.
Let's say:
let temporalTable = document.getElementsByClassName("table")[0];
Then apply a style to this object. You can use plain JS functions.
And finally:
html2canvas(temporalTableWithNewStyles)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})
I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
I created a plugin with a custom dialog window.
CKEDITOR.plugins.add('imggallery',
{
init: function (editor) {
var pluginName = 'imggallery';
editor.ui.addButton('Image',
{
label: 'Add image',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('imggallery') + 'lightbulb.gif'
});
editor.addCommand('OpenWindow', new CKEDITOR.dialogCommand('simpleLinkDialog'));
var html2 = "<h1>This is a heading</h1>";
CKEDITOR.dialog.add('simpleLinkDialog', function (editor) {
return {
title: 'LinkProperties',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'html',
html: html2
}
]
}
]
};
});
}
});
My question is: Is it possible to somehow display ASP.MVC view in window content?
When I assign html2 to elements property the text is shown without formatting (plain text).
Are you sure it's plain text and not a H1 tag that is formatted to look like plain text? There's a big difference :). The CKE dialogs reset most of the standard browser styles so that elements appear like plain text, even though they are not.
As for the MVC view, I would recommend that you add an iframe within the CKE dialog and display the page normally there. Then you can control or get/set values from the iframe using JavaScript. It will be a bit tricky, but should work.
var html2 = '<iframe id="DialogIframe" src="/MyController/MyView?foo=bar"></iframe>';
The other option is to use something like jQuery to $.get() the HTML and then use it, should be relatively simple if you have worked with ajax before. If not, here's a good chance to start! :)
I have problem with ASP.NET MVC Telerik Grid.
In my grid I have comment column and some columns contains too large text.
This effects to row height. I need that all rows have same height.
How I can reduce the text? I tried to add HTML abbr, but it doesn’t work.
Best regards Paul.
Using custom formatting, you can check the length of your text, and if the text length is greater than a certain number, you can limit the length by using substring. For example, if your comment column is called "Comment", you could do something like this:
Html.Telerik().Grid(Model)
.Name("MyGrid")
.CellAction(cell =>
{
if (cell.Column.Title != null)
{
if (cell.Column.Title.Equals("Comment"))
{
if (cell.DataItem.Comment.Length > 25)
{
cell.Text = cell.DataItem.Comment.Substring(0, 25) + "...";
}
}
}
});
Update
You asked about showing the complete comment. I don't know of a simple way built into the telerik control, but you can do it using css. I am using css code from kollermedia.at, but there are lots of examples of css tooltips if you want a different style.
In your css, put something like this:
/* tooltip */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Then change the line in your view to this:
cell.Text = "<a class=\"tooltip\" href=\"#\">" + cell.DataItem.Comment.Substring(0, 25) + "<span>" + cell.DataItem.Name + "</span></a>";
When you hover over the shortened text, the complete text is displayed in a tooltip.