Question

我正在使用TCPDF，它与普通的HTML / CSS有问题。它接受一组基本的HTML / CSS，遗憾的是没有什么真正的花哨。

我需要一种创建自定义虚线的方法，如下所示：

enter image description here

看到CSS如何只有solid，dashed或dotted的border属性，我缺少虚线的“其他方式”。我需要能够控制笔画的长度和中间空间的长度。例如，笔划长度为17，中间空间为5.

我该怎么做？我可以这样做吗？

到目前为止看其他问题对我没有帮助。我已经阅读了几个问题，到目前为止没有一个解决方案有帮助。要么它太花哨了（tcpdf忽略它），要么它回到破折号和点缀属性，这些不足以达到我的目的。

Answer 1

TCPDF / tcpdf.php（主文件）中有一个名为getCSSBorderDashStyle的方法。你可以设置不同的风格。

看起来像

switch (strtolower($style)) {
            case 'none':
            case 'hidden': {
                $dash = -1;
                break;
            }
            case 'dotted': {
                $dash = 1;
                break;
            }
            case 'dashed': {
                $dash = 3;
                break;
            }
            case 'double':
            case 'groove':
            case 'ridge':
            case 'inset':
            case 'outset':
            case 'solid':
            default: {
                $dash = 0;
                break;
            }
        }
        return $dash;

通过更新$ dash变量，您可以设置点/线之间的宽度和空间（根据需要调用它们）。 $ dash = 2它几乎与点边框相同。我附上以下示例：

短跑2 短跑5 短跑15 破折号50

您可以对此进行试验，并可能使结果更接近预期。我将它们设置在PDF的CSS中（在头顶）

<html>
            <head>
            <style type="text/css">
            .dashed_div
            {
                border-bottom: 1px dotted #000; 
                width:100%; 
                text-align:right;
                font-size: 12px;
            }
...

Answer 2

当你使用的库没有实现CSS更有用的功能（例如自定义虚线边框，图像边框或CSS渐变）和因为你只是在编写HTML + CSS生成一个PDF文档，然后我发现使用<table>等旧学校技术编写非语义HTML没有问题 - 滥用它来生成图像边框。

我建议使用9格：

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="topLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="topRightCorner.gif" alt="" /></td>
    </tr>
    <tr>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
        <td>content!</td>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
    </tr>
    <tr>
        <td><img src="botLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="botRightCorner.gif" alt="" /></td>
    </tr>
</table>

BIG SCARY警告：切勿在实际网络浏览器中查看的HTML文档中使用此标记。

...除了针对Office Outlook 2007-2013的HTML电子邮件可能例外，这仍然很糟糕：http://fixoutlook.org/和https://www.campaignmonitor.com/blog/post/3769/a-designers-guide-to-outlook-2013

（免责声明：我为微软工作，但不在Office团队工作，这些意见是我自己的，而不是公司和其他人的意见）

Answer 3

如何使用数据：JavaScript创建的base64字符串作为图像的src值？

使用基本HTML的HTML / CSS自定义边框

3 个答案: