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>
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 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.
I'm working on an image cropping tool based on cropper-js (made by fengyuanchen).
After testing with several images, every time i crop the image and resize it to small size (120x180), the result is an image with pixelated effect.
As far as I know, when resizing an image this effect could occurs as you are losing information, however when using other tools like MS Paint pixelation effect is smoother.
Actual Image
Link image
Crop and resized Image
Link image
Crop and resized Image with Paint tool
Link image
Piece of code of cropper
const imageElement = element.get(0);
element.on('load', () => {
const cropper = new Cropper(imageElement, {
responsive: true,
aspectRatio: 2/3,
guides: false,
zoomable: true,
zoomOnTouch: false,
zoomOnWheel: false,
movable: true,
toggleDragModeOnDblclick: false,
scalable: false,
cropBoxResizable: true,
autoCrop: true,
autoCropArea: 1,
minCropBoxHeight: 180,
minCropBoxWidth: 120,
viewMode: 1,
ready() {
scope.registerCropperInstance && scope.registerCropperInstance(cropper);
}
});
});
Piece of code for saving
const { height = 180, width = 120, mimeType = 'image/jpeg', quality = 1, imageSmoothingEnabled = false, imageSmoothingQuality = 'high' } = opts;
const cropperCanvas = cropperInstance.getCroppedCanvas({ height, width, imageSmoothingEnabled, imageSmoothingQuality });
return new Promise(function (resolve) {
cropperCanvas.toBlob(function (imgBlob) {
resolve(imgBlob);
}, mimeType, quality);
});
Is anything we could improve ? Thanks in advance.
I have spend hours on this and I got no where.
Here is the best combination I have got to.
https://jsfiddle.net/zardaloop/bztoju90/21/
However I can't understand why it is not printing correctly.
Does anyone know what I am doing wrong or knows any good solution to this?
window.takeScreenShot = function() {
html2canvas(document.getElementById("calendar"), {
onrendered: function (canvas) {
var doc = new jsPDF({ orientation: 'portrait',format: 'a4' });
var imgData = canvas.toDataURL("image/jpeg");
doc.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
doc.save("Print");
},
width:800,
height:600
});
}
Adding the background color to the generated image is enabling the printed pdf with readable content, Still figuring out the rest of the size issue which persists even after changing the orientation: 'landscape'
\\html2canvas(document.getElementById("calendar"), {
background: '#FFFFFF', \\Added option
\\ onrendered: function (canvas) {
Update:
Modifying the format and orientation is the way I see to debug this.
Please keep on trying with the same, for now the below line of code serves your purpose pretty well I believe.
var doc = new jsPDF({ orientation: 'landscape',format: 'a2' });
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