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.
Related
hello i am trying to generate multiple page dynamic pdf using html in my react js app. i got all the things right in pdf but the last line text of pages cuts if we set the dynamic pixels for html element it also cut table inside the html sometimes. here is my code
var pdf = new jsPDF({
orientation: "portrait", // landscape or portrait
unit: "mm",
format: "a4"//[250,250],
}
)
let pageHeight=pdf.internal.pageSize.height
pdf.html(html_element, {
callback: function (doc) {
doc.save();
},
x: 15,
autoPaging: "slice",
y: 15,
width: 170, //target width in the PDF document
windowWidth: 650 ,
margin:[10,7,10,7],
});
please help me with this
i have also tried jsdpf html2 convas examples but it did not give bottom margin in pages
I'm using html2pdf that creates pdf from html code. It uses html2canvas and jsPDF. The result is very good but slightly different from the original: the font-size and line-height are a little bit different so that the end of the page is not correct. I really need a copy if the div (that has fixed aspect to be correctly rendered on A4 pages).
Is there a way to influence the fonts in the final rendering? The way I produce pdf now is:
savePdf () {
this.pdfDialog = true
let opt = {
// if set firefox will not be able to print as pdf!...
// margin: 0,
filename: 'cv.pdf',
enableLinks: true,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 8,
useCORS: true,
width: 310,
letterRendering: true,
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
}
html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},
The solution is to add inline styles to the elements. In my case, working in vuejs I ended up with this code:
<div class="presentazione" v-html="presentation" :style="presentationFont"></div>
I'm using the cordova-plugin-camera to take a picture with these options:
quality: 100,
destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: false,
saveToPhotoAlbum: true,
correctOrientation: true
This is working and I get an URL / Path like this:
assets-library://asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG
Then, I want to convert this path to a cdvfile:// to display the image in an tag.
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
const url = fileEntry.toInternalURL()
})
This is also working and I get:
cdvfile://localhost/assets-library/asset/asset.JPG?id=FBA79210-5E65-4C9B-BF19-9F1169B777C0&ext=JPG
But the image is not rendered. I tried to add <access origin="cdvfile:*" /> in my config.xml but that's not working either. How can i get a valid path / url to display the image?
Best wishes,
Joeri
I had the same problem and managed to solve it with a different approach. After getting the cdvfile url I used Photo Library plugin to get the blob file through the getPhoto method passing the id present in the cdvfile url and with this in hand I got the img source working with the base64data as below:
photoLibrary.getPhoto('FBA79210-5E65-4C9B-BF19-9F1169B777C0').then((blob)=>{
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
img.src = base64data;
}
});
UPDATE
You can also use getThumbnail function to improve your page loading depending on the quality, size and quantity of photos you app is supposed to handle.
Im trying to get my jspdf to not save a blank page PDF. I been trying many examples, but nothing works :(. My table content is saved correct, with a image on the second page of the PDF, but my first page is blank.
var pdf = new jsPDF('o', 'pt', 'a6');
//pdf.autoTable(this.columns, this.data);
//var width = pdf.internal.pageSize.width;
//var height = pdf.internal.pageSize.height;
pdf.addPage('1800','900');
pdf.addImage(imgData, 'PNG', 120, 40, 120, 100);
pdf.setTextColor(0,0,0);
pdf.text(120, 20, 'BOOKINGS');
pdf.setFontSize(22);
// 'o', 'pt', 'a4'
// 'p', 'pt', 'letter'
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = jQuery('.dataTables_wrapper')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 120,
bottom: 0,
left: 0,
width: 2000
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
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('bookings.pdf');
}, margins);
}
The first page is blank because adding a page is the first call you make after calling the jsPDF constructor. The constructor does already create a (first) blank page. To get rid of the additional empty page at the start of the document, either delete the first page calling doc.deletePage(1), or do not add a page after the constructor is being called.
I'm using Angular UI Grid and I've tried to few ways to add an image (logo) to the top of the PDF document which gets exported.
I've had no luck with the implementations I've tried...
exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }
Is this even possible to do?
Thanks in advance.
Can you add your image inside a custom html header using headerTemplate: 'header-template.html', in grid-options?
See example ui-grid tutorial
edit
OK, having looked at the source and docs for the export, there is nothing there about passing images in the header.
It does refer you to pdfMake
Images
This is simple. Just use the { image: '...' } node type.
JPEG and PNG formats are supported.
var docDefinition = {
content: [
{ // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' },
{ // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 },
{ // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 },
{ // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] },
{ // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' },
{ // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ],
images: {
mySuperImage: 'data:image/jpeg;base64,...content...' } }
end of quote
So it looks like you were close.
Can you try a relative path from the root of your website wrapped in single quotes.
Had to write a custom export function to add page margins.
Plnkr
$scope.export = function() {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
docDefinition.pageMargins = [40, 80, 40, 60];
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
Image has to be provided as base 64 encoded, unless using Node.js (as per pdfmake library).
Otherwise, you may need to use a JavaScript function to download and convert an image to base 64.
References:
https://stackoverflow.com/a/37058202/2808230
pdfExport function in http://ui-grid.info/release/ui-grid.js
Found this as I was writing up this answer: Angular UI Grid - Exporting an image to a pdf