使用jsPDF生成PDF

问题描述 投票:0回答:1

[我正在尝试使用jsPDF从我的网页以pdf格式打印表格。我在新窗口中创建了表,发现jsPDF之前我正在做的工作是使用映射表打印整个新页面,但是现在我需要下载pdf而不显示打印向导,因此我尝试了jsPDF脚本出于我的目的,但是我无法打印表格的正确格式。我必须说我正在使用另一个称为JsBarcode的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)enter image description here

这就是我发送控制台脚本doc.save(“ test.pdf”);]时所拥有的]]

enter image description here

感谢您的帮助!

[我正在尝试使用jsPDF从我的网页以pdf格式打印表格。我在一个新窗口中创建了表,发现jsPDF之前我正在做的工作是使用映射表打印整个新页面,但是现在...

javascript pdf jspdf
1个回答
0
投票

由于您已经有了jQuery,请尝试使用document.ready

© www.soinside.com 2019 - 2024. All rights reserved.