如何将SVG图像添加到pdf答案

【问题标题】：How to add SVG image to pdf如何将SVG图像添加到pdf
【发布时间】：2021-04-09 08:27:21
【问题描述】：

当有人点击生成 pdf 按钮时，我想生成一个 pdf。此 pdf 包含与用户在网页上的图像中突出显示的内容相对应的一堆正方形的图像。每当我尝试包含 svg 时，我都会得到一个空白的 pdf。有什么帮助吗？

trial.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:

    function handleSVGClick(event) {
    if (event.target.tagName === "polygon") {
      event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
    }
  }

style.css：

    polygon {
    stroke-width: 2px;
    stroke: #333;
    fill: transparent;
  }

【问题讨论】：

标签： javascript php css pdf svg

【解决方案1】：

试试这样：

trial.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:

  function handleSVGClick(event) {
    if (event.target.tagName === "polygon") {
      event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
    }
  }

style.css：

  polygon {
    stroke-width: 2px;
    stroke: #333;
    fill: transparent;
  }

require 语句需要在引用命名空间之前 (use Dompdf\Dompdf;)
确保GD extension is installed 使images are supported
在 Dompdf README.md 中，声明的限制之一是尚不支持内联 SVG 元素：

嵌入“原始” SVG () 还不能正常工作，您需要链接到外部 SVG 文件，或者使用这样的 DataURI：
$html = '<img src="data:image/svg+xml;base64,' . base64_encode($svg) . '" ...>';

以上代码使用$svg 作为独立的 SVG 图像（而不是嵌入 HTML 中的 SVG 图像）。然后它将其编码为应呈现为 PDF 的 <img /> 元素的 DataURI。由于 SVG 图像本身包含嵌入图像，因此也需要为 encoded as a DataURI。

PDF 中的图像应如下所示：

【讨论】：

我有一个空白的 pdf
那么可能还有一个问题。您是否能够将非 SVG 的图像显示在 PDF 中？
不，只显示文字，但不显示图像。
Here in the Requirements 表示需要安装 GD 扩展才能支持图像。听起来这可能会丢失。 Here's how to install that.
当我检查使用函数 phpinfo();我发现 GD 已启用