Question

我正在尝试使用 jsPDF 和j sPDF-autotable 从html文件生成pdf。 Tt生成pdf并大致维护表格结构，但是缺少样式和对齐方式。我有带有内联样式的html表。参见下面的html片段：-

<table id="tradeDoc" style="table-layout: fixed; display: none;">
            <tbody>
            <tr style="vertical-align: top">
                <td colspan="5" rowspan="2" style="border: 1px solid black;width: 50%;">@Company Logo</td>
                <td colspan="5" style="border: 1px solid black;width: 50%;"> @Company Name</td>
            </tr>
            <tr>
                <td colspan="5" style="border: 1px solid black;"> @Company Address</td>
            </tr>
            <tr style="font-weight: bold; text-align: center">
                <td colspan="10" style="border: 1px solid black;">@Sales/@Purchase Contract</td>
            </tr>
            <tr>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Contract Date:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@contract date</td>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Contract Reference:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@contract reference</td>
            </tr>
            <tr>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Seller:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@company if sales, @counterparty if purchase</td>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Seller Reference:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@contract reference</td>
            </tr>
            <tr>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Buyer:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@company if purchase, @counterparty if sales</td>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Buyer Reference:</td>
                <td colspan="3" style="border: 1px solid black; width: 30%;">@contract reference</td>
            </tr>
            <tr>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Broker:</td>
                <td colspan="3" style="border: 1px solid black;">@broker</td>
                <td colspan="2" style="border: 1px solid black;"/>
                <td colspan="3" style="border: 1px solid black;"/>
            </tr>
            <tr>
                <td colspan="2" style="border: 1px solid black; width: 20%;font-weight: bold">Payment Term:</td>
                <td colspan="8" style="border: 1px solid black;">@payment Term</td>
            </tr>
            <tr style="vertical-align: top;font-weight: bold;">
                <td colspan="1" style="border: 1px solid black; width: 10%">Commodity</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Origin</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Grade</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Shipment</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">From</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">To</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Incoterm</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Quantity</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Price Component</td>
                <td colspan="1" style="border: 1px solid black; width: 10%">Price</td>
            </tr>
            <tr style="vertical-align: top;">
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
                <td colspan="1" style="border: 1px solid black;">Commodity</td>
            </tr>
            <tr>
                <td colspan="2" style="font-weight: bold;border: 1px solid black;">Terms and Conditions:</td>
                <td colspan="8" style="border: 1px solid black;">@comments</td>
            </tr>
            <tr style="text-align: center; font-weight: bold;">
                <td colspan="5" style="border: 1px solid black;">Seller</td>
                <td colspan="5" style="border: 1px solid black;">Buyer</td>
            </tr>
            <tr style="text-align: center;">
                <td colspan="5" style="border: 1px solid black;">@seller name</td>
                <td colspan="5" style="border: 1px solid black;">@Buyer name</td>
            </tr>
            <tr>
                <td colspan="5" style="border: 1px solid black; height: 100px;"/>
                <td colspan="5" style="border: 1px solid black;"/>
            </tr>
            </tbody>
        </table>

生成的表-

生成pdf的js方法是：-

    download() {
        let doc = new jsPDF('p', 'pt');
        doc.autoTable({
            html: '#tradeDoc',
            styles: {
                border: "1px solid black"
            },
        });
        doc.save('table.pdf');
    },

生成的PDF：-

如您所见，样式丢失了，另外添加了带区卷的表。我想念什么或做错什么？

jspdf-autotable生成的pdf不保持样式

0 个答案: