In the following files I have an SVG image of squares and the pile of 4 squares on the left can be highlighted. If you click on the top square, the squares from 1 to 4 will be filled green. If you clicked on the square number 3, the squares from 1 to 3 will be filled green. If you clicked the square number 2, the squares 1 and 2 will filled green and if you clicked the square number 1 it will be filled green. I want to that after the user highlights what he/she needs from the left pile of squares and opens the notes form and writes some notes then click generate PDF and enters his/her email in the form that opens and then clicks generate, a PDF is generated which has an image exactly the same as on the webpage with the highlighting that the user did and the notes that the user entered and this PDF would be sent to the user through his/her email.
My PHP code:
<?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>
This is my JavaScript code:
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";
}
This is my CSS code:
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%;
}
I tried a lot of things (like Dompdf and HTML2Canvas) and have been searching on how to do it for weeks and didn't reach a solution. I also checked those links but weren't helpful:
- PHP Library to Convert HTML containg SVGs to PDF
- Dompdf not generating PDF properly from SVG
- Export SVG elements to PDF?
- Convert SVG to PDF
- How can we generate PDF/A or PDF from HTML (contains SVGs) using iText7?
- Generate PDF from HTML and SVG
- I'm trying to print a webpage containing JavaScript charts but the converted document contains everything Except those charts
- Generating a PDF from a Tomcat-served webpage
- wkhtmltopdf to HTML
