Question

我正在尝试使用jsPDF从我的网页以pdf格式打印表格。我在一个新窗口中创建了表，发现jsPDF之前我正在做的工作是使用映射表打印整个新页面，但是现在我需要下载pdf而不显示打印向导，因此我尝试了{{3} }脚本，但我无法打印表格的正确格式。我不得不说我正在使用另一个名为jsPDF的js，因为我需要在表格中生成条形码并将其打印为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） JsBarcode

这就是我发送控制台脚本doc.save（“ test.pdf”）;

注意：我无法在控制台上编写doc.save（“ test.pdf”）脚本，因为我无法执行“功能（处理）”代码

感谢您的帮助！

更新：我正在尝试不包含function（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，但是表格未映射，条形码也未显示...

Answer 1

由于您已经拥有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
); 
});

使用jsPDF生成PDF

1 个答案: