I have used jspdf-html2canvas package in Angular 10 project for PDF download. Post deployment in safari browser the downloaded pdf bold font is not rendering proper. Also some of the pages shows alignment issues. Same code is working fine on local.
Package link: [https://www.npmjs.com/package/jspdf-html2canvas]
Issues:
Bold text is overlapping
text displayed with strong tag are not aligned
Error image reference
Below is the configuration I have used.
const opt = {
jsPDF: {
unit: 'px',
format: 'a4',
},
html2canvas: {
imageTimeout: 15000,
logging: true,
useCORS: true,
allowTaint: true,
quality: 2,
scale: 5,
},
imageType: 'image/jpeg',
imageQuality: 1,
margin: {
top: 50,
right: 20,
bottom: 32,
left: 20,
},
output: 'pdfFileName',
init: function () { }
}
Related
I use jsPDF to generate PDF but somehow, the margin that I've set on it seems not working for pagesplit.
I tried this method but not working as well (when it comes to second page, the margin is not working): Jspdf addHTML pagesplit option is stretching the pages
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
pdf.addHTML(document.querySelector('#print'), 0, 0, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
*tried this method too:
pdf.addHTML(document.querySelector('#print'), 25, 50, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
Below is the result:
The text of a column in my table is required to render as HTML but the table can't render it, the following code is the way I'm generating the PDF:
var doc = new jsPDF({ format: 'a4', unit: 'px' });
doc.setFontSize(10);
var alignOption: any = { align: 'left' };
if (company) doc.text(`Company: ${company}`, 10, 15, alignOption);
if (division) doc.text(`Division: ${division}`, 10, 30, alignOption);
autoTable(doc, {
styles: { fontSize: 5 },
columnStyles: { 5: { cellWidth: 200 } },
margin: { top: 40, bottom: 40 },
head: [Object.keys(data[0])],
body: formatedData,
foot: [['total', '500']],
});
doc.save('hourlyReport.pdf');
The following image is the result I get:
Is there a way I can render the marked information as HTML?
document.autoTable({
head,
body,
startY: XX,
styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2, font: 'Helvetica' },
headStyles: { fillColor: '#ffffff', textColor: '#333333', font: 'Helvetica' },
bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 }
});
head am passing as below:
const head = [{
content: "طيران الإمارات",
styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 },
},
{
content: 'Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
},
{
content: 'Tier Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
}
];
with Helvetica Font, Head Text showing as special characters.
Special Characters
With Custom font Its showing in Arabic but word is breaking
I have passed as header this "طيران الإمارات" but in pdf its showing as this طير لإما Breaking word
headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }
you have to add fontStyle in headStyles object
Go to google fonts and download Amiri font ( I have tried other Arabic fonts but they did not work for some reason).
Go to this converter tool to convert your font to base64 and download the generated JavaScript file (When converting your Amiri font, upload one .ttf file per time and not the full .zip folder, otherwise you will get an error. If you want to add more font variants upload and add them separately).
Go to your project and import the downloaded file (or add the script tag manually if you do not use modules).
import "./fonts/Amiri";
// .... here goes your code working with the table.
If you use jspdf-autotable library add the following code to its configs:
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" }, // For Arabic text in the table head
bodyStyles: { font: "Amiri" }, // For Arabic text in the table body
});
Full example with autotable would look like this:
import { jsPDF } from "jspdf";
import "jspdf-autotable";
import "../../../fonts/Amiri";
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" },
bodyStyles: { font: "Amiri" },
});
I'm generating Charjs graphs in rails with wicked_pdf and wkhtmltopdf (ver 0.12.4). i've updated wkhtmltopdf gem from ver 0.12.3.1 to ver 0.12.4 because it uses a lot of RAM memory and takes too much time when generate long PDFs, but charjs graphs worked. Now, with the new version, occurs an error when responsive chart option is set to false:
When set it to true, there is no errors but it does not work, even if the parent block has width and height setting.
i don't know how to solve this with the newest version of wkhtmltopdf and gem downgrade isn't an option.
pls help.
i've tried by setting width and height to the parent container and chartjs canvas, more javascript_delay in wkhtmltpdf, no animations in charjs, onbeforeprint callback with recomended function by charjs doc
html
<div class="canvas-holder" style="width: 800px; height: 1200px;">
<canvas id="real-costs-bar-chart-1" width="800" height="1200" style="width: 800px; height: 1200px;"></canvas>
</div>
charjs code
var ctx = document.getElementById(canvas_id).getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
label: 'Real',
data: data1,
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: 'Proyectado',
data: data2,
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
}
],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: labels
},
options:{
title: {
display: true,
text: title,
fontSize: 10,
fontColor: '#00397B',
lineHeight: 3
},
responsive: false,
legend:{
position: 'bottom',
fontSize: 10
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return 'USD ' + number_to_cl(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || '',
value =
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (label) {
label += ': ';
}
label += 'USD ' + number_to_cl(value);
return label;
}
}
}
}
})
wicked_pdf config
pdf = WickedPdf.new.pdf_from_string(
template,
pdf: "Report_#{cost_report_type}", javascript_delay: 2000,
header: { content: header, spacing: 10 },
footer: { center: 'Pagina [page] de [topage]', spacing: 5 },
margin: {
top: 35,
bottom: 15
},
encoding: 'UTF-8',
zoom: 0.8,
orientation: 'Portrait'
)
I'm using jspdf-autotable on angular 4.
The line width is wrong when there is an overflow of content. I will like to use long content on my table but the breakline doesn't work right. What can i do????
There is my source code
doc.autoTable(colonnes, rows, {
theme: 'striped',
styles: {
fillColor: [10, 10, 20],
overflow: 'linebreak',
fontSize: 15,
rowHeight: 20,
columnWidth: 'wrap',
theme: 'striped',// 'striped', 'grid' or 'plain'
startY: false, // false (indicates margin top value) or a number
pageBreak: 'auto', // 'auto', 'avoid' or 'always'
tableWidth: 'wrap', // 'auto', 'wrap' or a number,
showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
tableLineColor: 200, // number, array (see color section below)
tableLineWidth: 2,
},
tableWidth: 'auto',
columnWidth: 'auto',
columnStyles: {
id: {fillColor: [15, 15,25]},
//1: {columnWidth: 'auto'},
columnWidth: 'wrap',
},
headerStyles: {theme: 'striped'},
margin: {top: 60},
addPageContent: function(data) {
doc.text(nom + ' Nombre Total : ' + rows.length, 150, 40);
/*fontSize: 25;
fontFamily: 'vivaldi';*/
}
});
doc.save(nom+now+'.pdf');
In columnStyles add 'overflow: '
Possible values for overflow:
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
columnStyles = {
columnId: {
overflow: 'ellipsize'
}
}