Генерация PDF с помощью jsPDF - PullRequest
Новая
       15

Генерация PDF с помощью jsPDF

0 голосов
/ 02 октября 2019

Я пытаюсь распечатать таблицу с моей веб-страницы в формате PDF с помощью jsPDF. Я создаю таблицу в новом окне, и то, что я делал до того, как обнаружил, что jsPDF печатал всю новую страницу с сопоставленной таблицей, но теперь мне нужно скачать pdf без мастера показа печати, поэтому я попробовал jsPDF сценарии для моей цели, но я не могу напечатать правильный формат моей таблицы. Я должен сказать, что я использую другой js под названием JsBarcode , потому что мне нужно сгенерировать штрих-код в моей таблице и распечатать его в PDF, и сейчас я не могу его правильно распечатать.

Вот мой код JavaScript: 

JsBarcode(".barcode").init(); 
var doc = new jsPDF(); 
var specialElementHandlers = {
    "#bypassme": function (element, renderer) {
        return true
    }
}; 
var margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
}; 
var source = $("#content")[0];
doc.fromHTML(
    source.innerHTML,
    margins.left, 
    margins.top, 
    {
        "width": margins.width,
        "elementHandlers": specialElementHandlers
    }, 
    function (dispose) { 
        doc.save("Test.pdf"); 
    }, 
    margins
);

Вот HTML: 

<div id="content">
<table border="2px" class="table" style="border: 2px dashed #000; border-collapse: collapse;" >
    <tr>
        <td style="border: 0px;">
            <table class="table" style="font-size:13px;">
                <tr style="background-color:#bdbdbd;">
                    <td>VALUE_0</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.1</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.2</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.3</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.4</td>
                </tr>
            </table>
        </td>
        <td style="border: 0px;">
            <table class="table" border="2px" solid>
                <tr style="background-color:#bdbdbd;">
                    <td><b>VALUE_1</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.1</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.2</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.3</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.4</b></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="border: 0px;">
            <p><b>VALUE_2</b></p>
            <p><b>VALUE_3</b></p>
            <p><b>VALUE_4</b></p>
            <p><b>VALUE_5</b></p>
        </td>
        <td style="text-align:center; border:0px;">
            <svg class="barcode" jsbarcode-format="code128" jsbarcode-value="VALUE_6" jsbarcode-textmargin="0" jsbarcode-margin="0" jsbarcode-height="50" jsbarcode-fontSize="18" jsbarcode-fontoptions="italic"></svg>
        </td>
    </tr>
</table>
</div>

Я добавил библиотеки jquery, jsbarcode и jspdf. Это то, что я получаю, когда печатаю всю страницу (вызывая событие window.print () с консоли и сохраняя его в формате pdf) enter image description here

И это то, что у меня естькогда я отправляю на консоль скрипт doc.save ("test.pdf");

enter image description here

ПРИМЕЧАНИЕ: я пишу скрипт doc.save("test.pdf") на консоли, потому что я не могу выполнить код "function (dispose)"

Спасибо за помощь!

ОБНОВЛЕНИЕ: Я пытаюсь использовать тот же код без части функции (dispose), вот так 

document.onload = setTimeout(function () {
    JsBarcode(".barcode").init(); 
    var doc = new jsPDF(); 
    var specialElementHandlers = {
        "#bypassme": function (element, renderer) {
            return true
        }
    }; 
    var margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    }; 
    var source = $("#content")[0];
    doc.fromHTML(
        source.innerHTML,
        margins.left, 
        margins.top, 
        {
            "width": margins.width,
            "elementHandlers": specialElementHandlers
        }
    );

    doc.save("Test.pdf"); 
}, 500);

И теперь я получаю PDFбез кода ничего на консоли, но таблица не отображается и штрих-код не отображается ...

1 Ответ

0 голосов
/ 03 октября 2019

Поскольку у вас уже есть jQuery, попробуйте использовать document.ready . 

JsBarcode(".barcode").init(); 

$( document ).ready(function() {
var doc = new jsPDF(); 
var specialElementHandlers = {
    "#bypassme": function (element, renderer) {
        return true
    }
}; 
var margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
}; 
var source = $("#content")[0];
doc.fromHTML(
    source.innerHTML,
    margins.left, 
    margins.top, 
    {
        "width": margins.width,
        "elementHandlers": specialElementHandlers
    }, 
    function (dispose) { 
        doc.save("Test.pdf"); 
    }, 
    margins
); 
});
...