0

I'm trying to recreate the pdf preview thing on the jspdf site so I can test out some stuff programatically at my leisure. Looking at the site's source, the html is:

<iframe src="datauri:application/pdf;base64,blahblahblah">
    <html>
        <body>
            <embed src="same as above" type="application/pdf" />
        </body>
    </html>
</iframe>

jsfiddle doesn't play nice with embedded <html> so I've tried various combinations of:

//Cannot read property "canvas" of undefined
<img id="pdf" />
$("#pdf").attr("src", doc.output("datauristring"));

...

//Cannot read property "canvas" of undefined
<embed id="pdf" type="application/pdf" />
document.querySelector("#pdf").src = doc.output("datauristring");

I also tried implementing a canvas and drawing the datauri as detailed here, but that didn't work either. Here's my fiddle.

Community
  • 1
  • 1
Daniel Lizik
  • 3,058
  • 2
  • 20
  • 42

2 Answers2

0

It's working on a local server with http-server, I think jsfiddle is just being weird.

var doc = new jsPDF("landscape");
doc.text(20, 20, "hi");
var data = doc.output("datauristring");
document.querySelector("#iframe").src = data;
document.querySelector("#pdf").src = data;

...

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="/style.css" type="text/css" />
        <script src="/node_modules/jspdf/dist/jspdf.min.js"></script>
    </head>

    <body>

        <iframe id="iframe">
            <html>
                <body>
                    <embed type="application/pdf" id="pdf" />               
                </body>
            </html>
        </iframe>

        <embed type="application/pdf" id="pdf" />

        <script src="/app.js"></script>

    </body>
</html>
Daniel Lizik
  • 3,058
  • 2
  • 20
  • 42
0

Reaso it doesn't work is probably because JSFiddle sends this header:

X-Frame-Options: SAMEORIGIN

lapo
  • 3,136
  • 26
  • 34