在 jsfiddle 中嵌入带有 datauri src 的元素？

Question

我正在尝试在 jspdf site 上重新创建 pdf 预览，这样我就可以在闲暇时以编程方式测试一些内容。查看网站的来源，html 是：

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

jsfiddle 在嵌入式 <html> 中表现不佳，所以我尝试了各种组合：

//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");

我还尝试实现 canvas 并详细绘制 datauri here, but that didn't work either. Here's my fiddle。

Answer 1

它在 http-server 的本地服务器上工作，我认为 jsfiddle 很奇怪。

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>

Answer 2

它不起作用的原因可能是因为 JSFiddle 发送了这个 header:

X-Frame-Options: SAMEORIGIN

在 jsfiddle 中嵌入带有 datauri src 的元素？

Embed element with datauri src in a jsfiddle?

javascript

jsfiddle

jspdf