来自混合图像表的jsPDF&文字内容

时间:2015-08-06 22:08:48

标签: jspdf

我花了很多时间与jsPDF合作尝试创建一个pdf文档,该文档使用一些表格,其中包含某些单元格中的图像和其他单元格中的文本。我误解了一些关键的东西。即使我将图像转换为数据网址,图像也不会出现在最终的PDF中。我也尝试了 .fromHTML ,但结果页面是空白的。

到目前为止,我唯一可以工作的是一个直的,单列的div,每个div中只有一个项目。使用.fromHTML以这种方式工作,但似乎不能同时使用多个div来限制我在doc中间包含动态内容的图形边框的能力,该动态内容是从URL检索的 - 地址中的编码对。

所以我一直试图用表来做。这是我想要实现的目标的图片。 Certificate Sliced。使用切片将其导出Photoshop(如图所示)。表很简单,虽然它确实有一些colspans可能是我的问题的一部分。然后我使用DataURL Maker对图形部分进行编码,并将仅具有纯文本的中间单元格保留为html文本。

这是Photoshop中输出的表格(带有原始图像链接):

<html>
<head>
    <title>Certificate 2015-table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Certificate 2015-table.psd) -->
    <table id="Table_01" width="997" height="750" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="5"><img src="images/small-table_01.png" width="997" height="222" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_02.png" width="86" height="46" alt=""></td>
            <td colspan="3"><img src="images/small-table_03.png" width="826" height="46" alt=""></td>
            <td><img src="images/small-table_04.png" width="85" height="46" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_05.png" width="86" height="45" alt=""></td>
            <td colspan="3"><img src="images/small-table_06.png" width="826" height="45" alt=""></td>
            <td><img src="images/small-table_07.png" width="85" height="45" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_08.png" width="86" height="74" alt=""></td>
            <td colspan="3"><img src="images/small-table_09.png" width="826" height="74" alt=""></td>
            <td><img src="images/small-table_10.png" width="85" height="74" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_11.png" width="86" height="75" alt=""></td>
            <td colspan="3"><img src="images/small-table_12.png" width="826" height="75" alt=""></td>
            <td><img src="images/small-table_13.png" width="85" height="75" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_14.png" width="86" height="56" alt=""></td>
            <td colspan="3"><img src="images/small-table_15.png" width="826" height="56" alt=""></td>
            <td><img src="images/small-table_16.png" width="85" height="56" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_17.png" width="86" height="54" alt=""></td>
            <td colspan="3"><img src="images/small-table_18.png" width="826" height="54" alt=""></td>
            <td><img src="images/small-table_19.png" width="85" height="54" alt=""></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="3"><img src="images/small-table_20.png" width="565" height="99" alt=""></td>
            <td><img src="images/small-table_21.jpg" width="255" height="19" alt=""></td>
            <td colspan="2" rowspan="3"><img src="images/small-table_22.png" width="177" height="99" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_23.png" width="255" height="22" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/small-table_24.png" width="255" height="58" alt=""></td>
        </tr>
        <tr>
            <td colspan="5"><img src="images/small-table_25.png" width="997" height="78" alt=""></td>
        </tr>
        <tr>
            <td><img src="images/spacer.gif" width="86" height="1" alt=""></td>
            <td><img src="images/spacer.gif" width="479" height="1" alt=""></td>
            <td><img src="images/spacer.gif" width="255" height="1" alt=""></td>
            <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
            <td><img src="images/spacer.gif" width="85" height="1" alt=""></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

当然,目标是拥有一个可以为每个学生和每个可以下载为PDF的课程定制的证书。是否可以在表格的单元格中包含图片并使用jsPDF保存?

感谢您的帮助, --Kevin

0 个答案:

没有答案