1

I am trying to convert html to pdf which has svg image as background image. When convert it with selectPdf api (v2) it doesn't print background svg image but if i use their online test page to convert same html to pdf it does print background image.

Here's how I am calling 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 code sending 

<!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>
Bhavesh
  • 819
  • 1
  • 17
  • 31

1 Answers1

0

When base64 encoded images are used, set an additional API parameter skip_decoding to True.

Tom
  • 285
  • 2
  • 3