Print Pdf in original aspect ratio in Javascript

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

Leave a Reply

Your email address will not be published. Required fields are marked *