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

我也试过实现一个画布并将datauri绘制为详细的here，但这也不起作用。这是我的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>

在jsfiddle中使用datauri src嵌入元素？

1 个答案: