I am trying to use the html2pdf.js library to render a section of my html to a pdf which I can download. I have it all mostly working except for that any iframe elements I have on my page are not rendered to the pdf and are just not existent? Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[CSS/JS Files - Start]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(document).on('click', '.btn_print', function(event)
{
event.preventDefault();
//credit : https://ekoopmans.github.io/html2pdf.js
var element = document.getElementById('container_content');
//easy
//html2pdf().from(element).save();
//custom file name
//html2pdf().set({filename: 'code_with_mark_'+js.AutoCode()+'.pdf'}).from(element).save();
//more custom settings
var opt =
{
margin: 1,
filename: 'pageContent_'+js.AutoCode()+'.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
});
});
</script>
<style>
#container_content{
margin:auto;
width: 50%;
border: 2px solid lightgray;
box-shadow: 2.5px 10px lightgray;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-center" style="padding:20px;">
<input type="button" id="rep" value="Print" class="btn btn-info btn_print">
</div>
<div class="container_content" id="container_content">
//iframe src tag shortened for brevity
<h1>PTS Usage</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
<h1>Top Subscriber</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
</div>
</body>
</html>
So everything except the iframe elements within my are rendered to the pdf that downloads on the click of the button. Is there a way to fix this with html2pdf or should I use a different JavaScript library?
