I am generating html to pdf using jsPDF jsPDF-autotable, the header, and footer is being printed well. I have tried adding a logo to the header but it is failing to print it, when I console.log(base64Img)
and convert it, it is the same logo.
This is the code to convert image to base64 string
imgToBase64 (url, callback) {
if (!window.FileReader) {
callback(null);
return;
}
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function () {
const reader = new FileReader();
reader.onloadend = function () {
callback((reader.result as string).replace('text/xml', 'image/jpeg'));
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
And this is the code to generate the pdf
generatePDF() {
let base64Img = null;
this.imgToBase64(this.imageURL, (base64) => {
base64Img = base64;
console.log('image in base 64', base64Img);
const doc = new jspdf('p', 'pt', 'a4');
const header = function(headerData: any) {
doc.setFontSize(20);
doc.setTextColor(0, 190, 208);
doc.setFontStyle('normal');
if (this.base64Img) {
doc.addImage(this.base64Img, 'JPEG', headerData.settings.margin.left, 15, 60, 10);
doc.setFontSize(20);
}
doc.text('Header Title', headerData.settings.margin.left, 60);
const currentdate = new Date();
const datetime = currentdate.getDate() + '/' + (currentdate.getMonth() + 1) + '/' + currentdate.getFullYear();
doc.text('Date: ' + datetime, headerData.settings.margin.left + 400, 60);
doc.setFontSize(5);
};
const totalPagesExp = '{total_pages_count_string}';
const footer = function(footerData) {
doc.setFontSize(10);
let str = 'Page ' + footerData.pageCount;
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
str = str + ' of ' + totalPagesExp;
console.log('test');
}
doc.text(str, footerData.settings.margin.left, doc.internal.pageSize.height - 10);
doc.text('https://wwww.example.com', footerData.settings.margin.left + 400, doc.internal.pageSize.height - 10);
};
const head = [['Name', 'Phone', 'Email', 'Gender', 'Location', 'Country']]
const options = {
beforePageContent: header,
afterPageContent: footer,
margin: {
top: 100
},
head: head,
columnStyles: {
0: {columnWidth: 100},
1: {columnWidth: 80},
2: {columnWidth: 80},
3: {columnWidth: 50},
}
};
const elem = document.getElementById('pdfContent');
const data = doc.autoTableHtmlToJson(elem);
doc.autoTable( data.columns, data.rows, options);
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
doc.save('generated.pdf');
});
}
I thing i'm too late, but this will help others.
you can use like
var doc = new jsPDF('p', 'pt');
var header = function (data) {
doc.setFontSize(18);
doc.setTextColor(40);
doc.setFontStyle('normal');
doc.addImage(base64_source, 'JPEG', data.settings.margin.left, 20, 50, 50);
//doc.addImage(image base64_source, 'image format', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);
//Image must be Base64 encoded
};
doc.autoTable(columns, rows, {margin: {top: 80}, beforePageContent: header});
doc.save("test.pdf");
Note: you have to use with your code variables this is only demo.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.