我正在尝试将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();
网页代码发送
<!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>
使用 base64 编码图像时,将附加 API 参数设置为 skip_decoding True。