I am using jsPDF to print a pdf file. The issue is that the printed pdf and the original image has some major differences. The printed pdf looks more shrinked and with low definition. I want the image aspect ratio to be the same and the image definition to be high But I cant seem to find a solution to that. My code is
var dialog = document.getElementById('myFirstDialog');
var isVisible = false;
function toggleclick() {
if (!isVisible) {
dialog.show();
isVisible = true;
}
else {
dialog.close();
isVisible = false;
}
}
var exportButton = document.getElementById('download-map');
exportButton.addEventListener(
'click',
function () {
var C1 = document.getElementById('width').value
var C2 = document.getElementById('height').value
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148],
custom: [C1, C2]
};
var exportOptions = {
filter: function (element) {
var className = element.className || '';
return (
className.indexOf('ol-control') === -1 ||
className.indexOf('ol-scale') > -1 ||
(className.indexOf('ol-attribution') > -1 &&
className.indexOf('ol-uncollapsible'))
);
},
};
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var dim = dims[format];
var size = map.getSize();
map.once('rendercomplete', function () {
exportOptions.width = size[0];
exportOptions.height = size[1];
domtoimage
.toPng(map.getViewport(), exportOptions)
.then(function (dataUrl) {
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
}).finally(() => {
// Reset original map size
//scaleLine.setDpi();
map.getTargetElement().style.width = '';
map.getTargetElement().style.height = '';
map.updateSize();
//map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
});
map.render();
});
var compass, compassBottom;
function setCompass() {
if (compass)
map.removeControl(compass);
if (compassBottom)
map.removeControl(compassBottom);
compass = new ol.control.Compass({
className: "top",
src: "./mapIcons/north-arrow.png",
// rotateWithView: $("#rotate").prop("checked"),
rotateWithView: true
});
map.addControl(compass);
}<dialog id="myFirstDialog" style="position: absolute;
padding: 10px;
top: 20vh;
left: 7vw;
max-width: 350px; background-color:lightgoldenrodyellow;border:1px 2px dotted black;">
Enter the Size Manually:
<form id="form">
<label for="fname">Page Width</label><br>
<input type="number" id="width" placeholder="Example: 1157"><br>
<label for="lname">Page Height</label><br>
<input type="number" id="height" placeholder="Example: 809"><br>
</form>
<br>
Or
Choose Size
<br>
<label for="format">Page size </label>
<select id="format">
<option value="a0">A0(1189mm,841mm)</option>
<option value="a1">A1(841mm,594mm)</option>
<option value="a2">A2(594mm,420mm)</option>
<option value="a3">A3(420mm,297mm)</option>
<option value="a4" selected>A4(297mm,210mm)</option>
<option value="a5">A5(210mm,148mm)</option>
</select>
<div style="float:right;">
<button id="download-map" type="button" class="btn btn-primary">Export pdf</button>
<button id="hide" onclick="toggleclick()" type="button" class="btn btn-default">Close</button>
</div>
</dialog>Answer
I finally got it I was inserting wrong export options height and width, That both should come from dimensions not from present map size