HTML, CSS, IMG (SVG) в PDF с помощью JS JSPDF - PullRequest
Новая
       15

HTML, CSS, IMG (SVG) в PDF с помощью JS JSPDF

0 голосов
/ 24 сентября 2018

Я хочу преобразовать div в pdf и загрузить его.

Я использую файл изображения svg, который загружается при его загрузке.

Этот код хорошо работает в браузере Safari.растягивает изображение в Chrome и удаляет изображения в Firefox. Текст генерируется динамически.

enter image description here

это код, который я использую

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>

А вот так выглядит после загрузки

enter image description here

1 Ответ

0 голосов
/ 24 сентября 2018

Вы должны использовать размер a4, объявленный в переменной a4 вместо 430 и cache_height в doc.addImage

Ваше изображение выглядит растянутым из-за неправильной ширины и высоты.

...