Html, css, img(svg) 使用js jspdf 转pdf

Question

i want convert a div to pdf and download it.

I am using a svg image file which streches when i download it.

This code is working well in safari browser. streches image in chrome and remove pictures in firefox Text is generated dynamically.

this is the code i am using

JS:

    <script>
    // Define variables
    var
     form = $('#certificateDiv'),
     cache_width = form.width(),
     cache_height = form.height(),
     a4 = [595.28, 841.89]; // for a5 size paper width and height




    //create pdf
    function createPDF() {
        $('#exportBtn').addClass("hide");
        //form.removeClass('back-repeat');
        if (cache_height > 600)
            cache_height = 600;

        // Call create canvas function
        getCanvas().then(function (canvas) {
            var
             img = canvas.toDataURL("image/png"),
             doc = new jsPDF({
                 unit: 'px',
                 format: 'a4'
             });
            doc.addImage(img, 'JPEG', 10, 10, 430, cache_height);
            var FileName = '@ViewBag.ModuleName';
            doc.save(FileName+'.pdf');
            form.width(cache_width);
        });
        $('#exportBtn').removeClass("hide");
        //form.addClass('back-repeat');
    }

    // create canvas object
    function getCanvas() {

        form.width((a4[0] * 1.2)).css('max-width', 'none');
        return html2canvas(form, {
            imageTimeout: 3000,
            removeContainer: true
        });
    }



</script>

Asp Code:

    <div id="OuterCertificate">
        <div id="certificateDiv" class="certificate-container-span">
            <img src="@CertificateURL" class="certificate-image">
            <div class="certificate_inner">
                <div class="certificate-title">@Model.Title</div>
                <div class="certificate-message">
                    @Html.Raw(Model.Message)

                </div>
            </div>
            <a id="exportBtn" class="btn btn-sm btn-default no-print" onclick="createPDF();"><i class="filetypes filetypes-pdf"></i>Export</a>

        </div>
    </div>

And this is how it looks like after downloading

Answer 1

You should use a4 size declared in variable a4 instead of 430 and cache_height in doc.addImage

Your image is looking stretched because of incorrect width and height.

Answer 2

try use canvas at this:

html2canvas(form,
  {
    height: window.outerHeight + window.innerHeight,
    width: window.outerWidth + window.innerWidth,
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    scrollX: 0,
    scrollY: 0
  }
).then(canvas => {
  var pdf = new jsPDF("l", "mm", "a4");
  var imgData = canvas.toDataURL('image/png');
  var width = pdf.internal.pageSize.getWidth();
  var height = pdf.internal.pageSize.getHeight();
  pdf.addImage(imgData, 'PNG', 0, 0, width, height);
  pdf.save('fulljspdfdiv.pdf');
});

Good luck