javascript - 如何从包含 SVG 元素的网页生成 PDF?
问题描述
在以下文件中,我有一个正方形的 SVG 图像,左侧的 4 个正方形堆可以突出显示。如果单击顶部的方块,从 1 到 4 的方块将被填充为绿色。如果您点击方块 3,则从 1 到 3 的方块将被填充为绿色。如果您单击正方形编号 2,则正方形 1 和 2 将填充为绿色,如果您单击正方形编号 1,它将填充为绿色。我希望在用户从左边的一堆正方形中突出显示他/她需要什么并打开笔记表单并写一些笔记然后单击生成 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>
这是我的 JavaScript 代码:
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";
}
这是我的 CSS 代码:
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%;
}
我尝试了很多东西(比如 Dompdf 和 HTML2Canvas),并且一直在寻找如何做到这一点,但没有找到解决方案。我还检查了这些链接,但没有帮助:
解决方案
推荐阅读
- android - 适用于不支持 Google Play 的 Android 设备的 Android 应用签名
- python - Python - 延迟后运行异步函数并且不阻塞其他代码
- pine-script - 预计趋势不会发生变化,具体取决于我们为多时间框架趋势选择的时间框架
- python - TKinter:在 For 循环之后调整画布中缩略图的大小
- python-3.x - 如何访问s3中子存储桶内的文件?
- javascript - JavaScript 在列表中添加 List 元素的解决方案是什么?
- objective-c - 为什么 NSView 原屏幕坐标与其 NSWindow 原屏幕坐标不同?
- node.js - 如何使用 OIDC 提供程序在 /token 端点中获取访问令牌和刷新令牌
- reactjs - 如何更新 React 选择列表
- orm - 急切加载在 sequelize orm 中不起作用