I am using jspdf.debug.js to export pdf data from html page.Here is the function of controller that I am using. I made a string as html table that I want to export.
$scope.exportReport = function (fileName, fileType) {
objReport.count = 0; // for getting all records
ReportService.getSaleDetail(objReport).then(function (result) {
var strTable = "<table id='tableReport'><tr><td style='width:400px'>Date</td><td style='width:50px'>Order Id</td><td style='width:130px'>Product</td><td style='width:120px'>Gorss Price</td><td style='width:160px'>Currency</td><td style='width:50px'>Order Status</td><td style='width:150px'>Assigned To</td><td style='width:150px'>Assigned User Email</td><td style='width:150px'>Country</td></tr>";
var strRow = '';
if (result.data.totalRecords > 0) {
var totalRecords = parseInt(result.data.totalRecords);
var saleDataJson = result.data.saleDetail;
for (var i = 0; i < totalRecords; i++) {
strRow = '<tr><td>' + saleDataJson[i].date + '</td>' + '<td>' + saleDataJson[i].orderId + '</td>' + '<td>' + saleDataJson[i].product + '</td>' + '<td>' + (1 * saleDataJson[i].grossPrice).toFixed(2) + '</td>' + '<td>' + saleDataJson[i].currency + '</td>' + '<td>' + saleDataJson[i].orderStatus + '</td>' + '<td>' + saleDataJson[i].assignedTo + '</td><td>' + saleDataJson[i].assignedUserEmail + '</td><td>' + saleDataJson[i].country + '</td></tr>';
strTable += strRow;
}
strTable += "</table>";
}
if (fileType === 'pdf') {
var pdf = new jsPDF('p', 'pt', 'letter') // jsPDF(orientation, unit, format)
, source = strTable
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true;
}
},
margins = {
top: 30,
bottom: 40,
left: 35,
width: 600
};
pdf.setFontSize(12);
pdf.text(200, 30, fileName);
pdf.setFontSize(8);
pdf.setFontStyle('italic');
pdf.text(420, 35, 'Total Records : ' + totalRecords);
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save(fileName + '.pdf');
},
margins
)
}
});
};
and this method is exporting pdf file like this
I tried style with tang but it is not working How can lower the font size so that i can export pdf file properly ?
setFont('SolaimanLipi', 'normal'); html2pdf(document. body, pdf, function (canvas) { var iframe = document. createElement('iframe'); iframe. setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px;font-family:SolaimanLipi;'); document.
jsPDF(orientation, unit, format) Creates new jsPDF document object. instance Parameters: orientation One of "portrait" or "landscape" (or shortcuts "p" (Default), "l") unit Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
pdf.setFont("helvetica");
pdf.setFontType("bold");
pdf.setFontSize(9);
it seems that pdf.fromHTML on tables ignores styling, or even jsPdf settings, such as pdf.setFont("helvetica");
etc.
so you can make changes to the original jspdf.debug.js file:
a) default autoSize
is false
, so you may change it.
b) default fontSize
is 12 - you should senthe d smaller value (add your value to the last argument).
/*** TABLE RENDERING ***/
} else if (cn.nodeName === "TABLE") {
table2json = tableToJson(cn, renderer);
renderer.y += 10;
renderer.pdf.table(renderer.x, renderer.y, table2json.rows, table2json.headers, {
autoSize : true,
printHeaders : true,
margins : renderer.pdf.margins_doc,
fontSize : 9
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With