jquery HTML到PDF转换器在JavaScript

fdx2calv  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(105)

我已经创建了一个HTML页面,我想打印和下载本地PDF完全相同的页面。但是pdf页面没有完全下载,它丢弃了最后3到4行。我想生成多个PDF页面,但在A4大小与HTML页面相同的样式。

(function () {
    var
     form = $('#formpdf, #logo'),
     cache_width = form.width(),
     a3 = [842, 1500]; // for a4 size paper width and height

    $('#create_pdf').on('click', function () {
        $('body').scrollTop(0);
        createPDF();
    });
    //create pdf
    function createPDF() {
        getCanvas().then(function (canvas) {
            var
             img = canvas.toDataURL("image/png"),
             doc = new jsPDF({
                 unit: 'px',
                 format: 'a3'
             });
            doc.addImage(img, 'JPEG', 10, 10);
            doc.save('Texas_Transportation.pdf');
            form.width(cache_width);

        });
    }

    // create canvas object
    function getCanvas() {
        form.width(a3[0]*1.3333-80).css('max-width', 'none');
        return html2canvas(form, {
            imageTimeout: 2000,
            removeContainer: false

        });
    }

}());


(function ($) {
    $.fn.html2canvas = function (options) {
        var date = new Date(),
        $message = null,
        timeoutTimer = false,
        timer = date.getTime();
        html2canvas.logging = options && options.logging;
        html2canvas.Preload(this[0], $.extend({
            complete: function (images) {
                var queue = html2canvas.Parse(this[0], images, options),
                $canvas = $(html2canvas.Renderer(queue, options)),
                finishTime = new Date();

                $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
                $canvas.siblings().toggle();

                $(window).click(function () {
                    if (!$canvas.is(':visible')) {
                        $canvas.toggle().siblings().toggle();
                        throwMessage("Canvas Render visible");
                    } else {
                        $canvas.siblings().toggle();
                        $canvas.toggle();
                        throwMessage("Canvas Render hidden");
                    }
                });
                throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
            }
        }, options));

        function throwMessage(msg, duration) {
            window.clearTimeout(timeoutTimer);
            timeoutTimer = window.setTimeout(function () {
                $message.fadeOut(function () {
                    $message.remove();
                });
            }, duration || 2000);
            if ($message)
                $message.remove();
            $message = $('<div ></div>').html(msg).css({
                margin: 0,
                padding: 10,
                background: "#000",
                opacity: 0.7,
                position: "fixed",
                top: 10,
                right: 10,
                fontFamily: 'Tahoma',
                color: '#fff',
                fontSize: 10,
                borderRadius: 10,
                width: 'auto',
                height: 'auto',
                textAlign: 'center',
                textDecoration: 'none',

            }).hide().fadeIn().appendTo('body');
        }
    };
})(jQuery);

字符串

wxclj1h5

wxclj1h51#

  • htmltocanvas允许你对html内容进行截图并将其保存为pdf。

用法示例:-
超文本标记语言

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

字符串
JavaScript

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});


使用npm install --保存html 2canvas下载库。

  • 您可以使用任何第三方库,如jsPDF或pdfmake。这些都是开源的,并提供了一个API来从html内容生成PDF。

相关问题