Open nishanth-cn opened 1 month ago
Hi , Thanks for the wonderful library.
I was just exploring it before using it for my project and i encountered a major issue. Issue Contents inside an or object or embed doesn't capture if it is a pdf.</p> <p><strong>code</strong></p> <pre><code><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Using an existing canvas to draw on</title> <style> canvas { border: 1px solid grey; } button { display: block; } #text { background: cyan; padding: 5px 10px; line-height: 1em; display: block; } </style> </head> <body> <div><h1>Html2canvas</h1> <div `>` <span id="text">Normal text</span> </div> <object id="frame" data="kids.pdf" width="100%" height="400px"></object> <!--<iframe id="frame" data="kids.pdf" ></iframe>--> <h3>Captured data</h3> <canvas id="textcapture" width="100%" height="200"></canvas> <canvas id="iframecapture" width="500" height="200"></canvas> </div> <script type="text/javascript" src="html2canvas.js"></script> <button>Capture</button> <script type="text/javascript"> var textcanvas = document.querySelector("#textcapture"); var framecanvas = document.querySelector("#iframecapture"); document.querySelector("button").addEventListener("click", function() { html2canvas(document.querySelector("#text") , {canvas: textcanvas, scale: 1}).then(function(canvas) { console.log('Text captured'); }); html2canvas(document.querySelector("#frame").contentDocument.body, {canvas: framecanvas, scale: 1,useCORS:true}).then(function(canvas) { console.log('Iframe captured'); }); }, false); </script> </body> </html></code></pre> <p><strong>details</strong> Span element in the main document is captured fine. However, <iframe> fails if content is a pdf, even if it is in same domain I have tried multiple was to get the document inside <iframe>, but it always fails. I have tried SetTimeout after looking at couple of other issue but it didn't solve the problem.</p> <p>is there any way to fix this or is it a limitation of html2canvas even if documents are in same domain ?. It would be helpful , if you suggest other libraries which have solution for this.</p> <h3>Specifications:</h3> <ul> <li>html2canvas version tested with: 1.4.1</li> <li>Browser & version: Chrome 127.0.6533.100</li> <li>Operating system: Windows 11</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Hi , Thanks for the wonderful library.
I was just exploring it before using it for my project and i encountered a major issue. Issue Contents inside an