如何将 SVG 图像添加到 pdf
[英]How to add SVG image to pdf
问题描述
I want to generate a pdf when someone clicks on the generate pdf button.
当有人单击生成 pdf 按钮时，我想生成 pdf 。 This pdf contains the image of the pile of squares highlighted corresponding to what the user highlighted in the image on the web page.此 pdf 包含突出显示的一堆正方形的图像，该图像与用户在 web 页面上的图像中突出显示的内容相对应。 Whenever I try to include the svg I get a blank pdf.每当我尝试包含 svg 时，我都会得到一个空白 pdf。 Any help?有什么帮助吗？
trial.html:试用.html：
<?php
use Dompdf\Dompdf;
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['send']))
{
$output = ' <!DOCTYPE html>
<svg width="564" height="409" >
<image
href="https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-
n-unit-squares.png"
width="564"
height="409"
/>
<polygon title="1" points="21,385 24,309 100,309 101,385" />
<polygon title="2" points="102,305 23,304 23,228 101,227" />
<polygon title="3" points="103,225 26,228 25,149 99,151" />
<polygon title="4" points="103,147 102,65 25,70 23,147" />
</svg>';
// $output .= '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'" width="100" height="100" />';
require 'C:\Users\Main\vendor/autoload.php';
$cart_body='<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Squares</title></head><body><p>Test Printing...</p></body></html>';
$dompdf = new Dompdf();
$dompdf->load_html($output);//body -> html content which needs to be converted as pdf..
$dompdf->render();
$dompdf->stream("sample.pdf");
}?>
script.js:脚本.js：
function handleSVGClick(event) {
if (event.target.tagName === "polygon") {
event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
}
}
style.css:样式.css：
polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
1 个解决方案
解决方案1
0 2021-01-03 09:05:37
Try like this:试试这样：
trial.html:试用.html：
<?php
require 'C:/Users/Main/vendor/autoload.php';
use Dompdf\Dompdf;
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['send']))
{
//any embedded images need to be base64 encoded as DataURIs
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="564" height="409" >
<image
href="data:image/jpg;base64,' . base64_encode(file_get_contents('https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-n-unit-squares.png')) . '"
width="564"
height="409"
/>
<polygon title="1" points="21,385 24,309 100,309 101,385" />
<polygon title="2" points="102,305 23,304 23,228 101,227" />
<polygon title="3" points="103,225 26,228 25,149 99,151" />
<polygon title="4" points="103,147 102,65 25,70 23,147" />
</svg>';
//convert SVG image to an <img /> element with the SVG image as a DataURI
$output = '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'" width="564" height="409" />';
$cart_body='<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Squares</title></head><body><p>Test Printing...</p></body></html>';
$dompdf = new Dompdf();
$dompdf->load_html($output); //body -> html content which needs to be converted as pdf..
$dompdf->render();
$dompdf->stream("sample.pdf");
}?>
script.js:脚本.js：
function handleSVGClick(event) {
if (event.target.tagName === "polygon") {
event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
}
}
style.css:样式.css：
polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
- The
requirestatement needs to be before referencing the namespace (use Dompdf\Dompdf;)require语句需要在引用命名空间之前（use Dompdf\Dompdf;） - Ensure GD extension is installed so that images are supported确保安装了 GD 扩展，以便支持图像
- In the Dompdf README.md , one of the stated limitations is that inline SVG elements are not yet supported:在Dompdf README.md中，声明的限制之一是尚不支持内联 SVG 元素：
Embedding "raw" SVG's (<path...>) isn't working yet, you need to either link to an external SVG file, or use a DataURI like this:
$html = '<img src="data:image/svg+xml;base64,'. base64_encode($svg). '"...>';
The above code uses $svg as a standalone SVG image (instead of a SVG image for embedding in HTML).上面的代码使用$svg作为独立的 SVG 图像（而不是用于嵌入 HTML 的 SVG 图像）。 It then encodes that as the DataURI of an <img /> element which should render as a PDF.然后它将其编码为<img />元素的 DataURI，该元素应呈现为 PDF。 As the SVG image itself contains an embedded image, that also needs to be encoded as a DataURI .由于 SVG 图像本身包含嵌入图像，因此也需要将其编码为 DataURI 。
The image in the PDF should look like this: PDF 中的图像应如下所示：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.