0

我正在尝试将 html 转换为具有 svg 图像作为背景图像的 pdf。当使用 selectPdf api (v2) 进行转换时，它不会打印背景 svg 图像，但如果我使用他们的在线测试页面将相同的 html 转换为 pdf，它会打印背景图像。

这是我调用 api 的方式

 var options = new PdfOptions();
 options.html = html;
 options.key = _key;
 options.margin_bottom = 0;
 options.margin_top = 0;
 options.SetLandscape();

var client = new HttpClient();
var content = new StringContent(JsonConvert.SerializeObject(options, new JsonSerializerSettings
            {
                NullValueHandling = NullValueHandling.Ignore
            }));
content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
var result = await client.PostAsync("http://selectpdf.com/api2/convert/", content);

if (!result.IsSuccessStatusCode)
 {
    var msg = await result.Content.ReadAsStringAsync();
    throw new ApplicationException($"Failed to create pdf: {msg}");
 }

return await result.Content.ReadAsStreamAsync();

html代码发送

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width"> 
    <style>

#watermark {
     position: fixed; 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=);
    height: calc(100% + 50px);
    width: calc(100% + 50px);
    background-size: 270px 160px;
    background-repeat: repeat;
    opacity: 0.3;
    top: -50px;
    z-index:1;
    left: -50px;
}
</style>
</head>
<body>
<div class="grid-container" style="width: 1200px">
<div id="watermark"></div>
    <div class="grid-x grid-padding-x">
    <div class="large-4 cell">
        <h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;"><strong></strong></h3>
    </div>

    <div class="large-4 cell text-right">
        <h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;">  Specification</h3>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 
    </p>
</div>
</div>
</body>
</html>
4

1 回答 1

0

使用 base64 编码图像时，将额外的 API 参数 skip_decoding 设置为 True。

于 2019-05-08T08:39:05.180 回答