Fatal编程技术网
  • javascript/
  • Javascript 如何从包含SVG元素的网页生成PDF？

Javascript 如何从包含SVG元素的网页生成PDF？

javascript html css pdf svg

Javascript 如何从包含SVG元素的网页生成PDF？,javascript,html,css,pdf,svg,Javascript,Html,Css,Pdf,Svg,在下面的文件中，我有一个正方形的SVG图像，左侧的4个正方形可以突出显示。如果单击顶部的正方形，从1到4的正方形将填充为绿色。如果单击方块编号3，则从1到3的方块将填充为绿色。如果单击方号2，则方号1和2将填充为绿色，如果单击方号1，则将填充为绿色。我想在用户从左侧的方块堆中突出显示他/她需要的内容并打开notes表单并编写一些备注，然后单击生成PDF并在打开的表单中输入他/她的电子邮件，然后单击生成，生成的PDF图像与网页上的图像完全相同，突出显示用户所做的操作以及用户输入的注释，该PDF将通

在下面的文件中，我有一个正方形的SVG图像，左侧的4个正方形可以突出显示。如果单击顶部的正方形，从1到4的正方形将填充为绿色。如果单击方块编号3，则从1到3的方块将填充为绿色。如果单击方号2，则方号1和2将填充为绿色，如果单击方号1，则将填充为绿色。我想在用户从左侧的方块堆中突出显示他/她需要的内容并打开notes表单并编写一些备注，然后单击生成PDF并在打开的表单中输入他/她的电子邮件，然后单击生成，生成的PDF图像与网页上的图像完全相同，突出显示用户所做的操作以及用户输入的注释，该PDF将通过用户的电子邮件发送给用户

我的PHP代码：

    <?php
     ?>

     <!DOCTYPE html>
     <html lang="en">
     <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
    <!-- Third party plugin CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="style.css" rel="stylesheet" />
</head>
<body id="page-top">

   
    <section class="text-center">    

    <svg id="mainImage" width="564" height="409" onclick="handleSVGClick(event)">
        <image
            href="https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-n-unit-squares.png"
            width="564"
            height="409"
        />
        <polygon id="B1_1" title="1" points="21,385 24,309 100,309 101,385" />
        <polygon id="B1_2" title="2" points="102,305 23,304 23,228 101,227" />
        <polygon id="B1_3" title="3" points="103,225 26,228 25,149 99,151" />
        <polygon id="B1_4" title="4" points="103,147 102,65 25,70 23,147" />
    </svg>
    <button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="openNotes()">Open Notes</button>
   <!-- <form  method="POST" >                  
        <input type="submit" class="button btn-primary" value ="generate" name="send"/>
    </form>-->

    <button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="openEmailForm()">Generate PDF</button>
    
    <div class="form-popup" id="noteForm" style="top: 300px; left:1rem">
            <div class="form-container text-justify" >
                <header>
                    <h1 style="color:green"><strong>Notes</strong></h1>
                </header>
                <textarea class="action" id = "ActionBody" maxlength="2000" placeholder="Write your notes here" style="resize: none;" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
                <br>
                <button type="button" class="btn " style="background-color: rgb(64,120,43);" onclick="closeNotes()"> Close Notes</button>
            </div>
        </div>

        <div class="form-popup" id="emailForm" style="top: 300px; left:8rem">
            <div class="form-container text-justify" >
                <header>
                    <h1 style="color:green"><strong>Email</strong></h1>
                </header>
                <label>please enter your email:</label>
                <input type="text"></input>
                <br>
                <button type="button" class="btn " style="background-color: rgb(64,120,43);" > generate</button>
            </div>
        </div>
    
    </section>


    
    <!-- Bootstrap core JS-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Third party plugin JS-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <!-- Core theme JS-->

    <script src="script.js"></script>
    <script type="text/javascript" src="mapper.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"> </script> 
    
</body>
</html>
我尝试了很多东西（比如Dompdf和HTML2Canvas），并且已经搜索了好几个星期，没有找到解决方案。我也检查了这些链接，但没有帮助：

function highlight(Num)
{
   console.log("entered notes",Num);
    notesTaken = Num;
    console.log("notes",notesTaken);

    for(var i =0; i<4;i++)
    {      
       if(i<Num)
         {
             document.querySelectorAll("[id^='B1']")[i].style.fill="green";
             document.querySelectorAll("[id^='B1']")[i].style.stroke="green";

          }
       else{
             document.querySelectorAll("[id^='B1']")[i].style.fill="transparent";
             document.querySelectorAll("[id^='B1']")[i].style.stroke="#E2E4E5";
            }
     }
     //e.preventDefault();
}
function handleSVGClick(event) {
   /*if (event.target.tagName === "polygon") {
     console.log("entered");
     event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
     console.log(filling);
     //session['filling'] = filling;   
     // $.session.set("filling", filling);
     //$.post("trial.php", {filling:filling});
        document.cookie = "filling="+filling;
 
      }*/
      console.log("entered");
      var idPolygon = event.target.id;
      console.log(idPolygon);
      var type = idPolygon.substring(0,2);
      var Num = parseInt(idPolygon.slice(3),10);
      console.log(Num);

      if(type == "B1")
      {
         highlight(Num);
      }
 }

 var filling = 8;

 function openNotes() {
       document.getElementById("noteForm").style.display = "block";
  }

 function closeNotes() {
       document.getElementById("noteForm").style.display = "none";
  }

 function openEmailForm() {
       document.getElementById("emailForm").style.display = "block";
       document.getElementById("noteForm").style.display = "none";
  }

 function closeEmailForm() {
       document.getElementById("emailForm").style.display = "none";
  }

polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
.text-center {
text-align: center !important;
}
.hoverApply:hover{
 fill:lightgray;
}
polygon {
stroke-width: 1px;
/*stroke: #333;*/
fill: transparent;
/*stroke-dasharray: 5;*/
stroke: #E2E4E5;
}

.form-popup {
display: none;
position: absolute;
border: 3px solid #54504A;
z-index: 9;
background-color: white;
max-width: 70%;
}