Question

我有以下HTML和CSS：

<div id="previewBox" style="background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
height:800px;border: 1px solid black;">
<font style="font-size:100pt;family:georgia;color:#3333FF">Some blue text here...</font>
</div>

我希望使用html2pdf将其转换为PDF，但它似乎无法正常工作。是否可以使用html2pdf转换渐变？

Answer 1

这取决于您如何将其转换为PDF。如果你使用PHP，你可以通过PHP的GD库生成一个图像，并将其设置为div的背景。

找到一个示例，您可以使用右here和一个实时示例here

然后将div的样式属性更改为：

  <div id="previewBox" style="background-image: url('path/to/gradiant.php?start=1e5799&end=7db9e8">

不要忘记在PHP中更改生成的背景渐变的宽度和高度。最佳做法是宽度为1像素，高度为div的高度。

Answer 2

我们在Prince中实现了对CSS背景渐变的支持。它尚未发布，但如果您有兴趣，我们可以为您提供测试版本。

Answer 3

我决定不使用html2pdf，但只使用支持线性渐变的核心tcftp。

html2pdf是否支持渐变

3 个答案: