2015-12-22 3 views
0

Я пытаюсь воссоздать предмет предварительного просмотра pdf на jspdf site, чтобы я мог пробовать некоторые вещи программно на моем досуге. Глядя на источник сайта, HTML, является:Вставить элемент с datauri src в jsfiddle?

<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.

ответ

0

Он работает на локальном сервере с 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> 
Смежные вопросы