我有以下使用https://github.com/MrRio/jsPDF库生成pdf的代码:
TRUE
EN_KILLFOCUS
我想要将生成的Blob pdf放到ID为UpdateData(TRUE)
的iframe中,您知道该怎么做吗?
我还发现Mozilla制作了var generatePdfFromHtml = function(pdf, html, callback) {
console.log("Generating Pdf");
pdf.html(html, {
'callback': function(pdf) {
if (callback && typeof callback === 'function') {
console.log("Offering Pdf as callback");
callback(pdf);
}
}
});
}
$(document).ready(function() {
/**
* @var {jsPDF} pdf
*/
var pdf = new jsPDF('p', 'pt', 'a4');
$("#myform").on('submit', function(e) {
e.preventDefault();
var val = $("#inputData").val();
/* Dummy Html to emulate the situation I am */
val = "<b>" + val + "</b>";
generatePdfFromHtml(pdf, val, function(returnedPDF) {
var blob = pdfFromCallback.output('blob');
console.log(blob)
/* Write Pdf into #display Iframe */
});
});
});
,允许我们在不支持pdf的情况下渲染pdf,以防万一pdf渲染不被支持,我该如何使用pdf.js渲染它?
答案 0 :(得分:0)
看看我编辑的这段代码,以便将pdf呈现为iframe
:
var generatePdfFromHtml = function(pdf, html, callback) {
console.log("Generating Pdf");
pdf.html(html, {
'callback': function(pdf) {
if (callback && typeof callback === 'function') {
console.log("Offering Pdf as callback");
callback(pdf);
}
}
});
}
$(document).ready(function() {
/**
* @var {jsPDF} pdf
*/
var pdf = new jsPDF('p', 'pt', 'a4');
$("#myform").on('submit', function(e) {
e.preventDefault();
var val = $("#inputData").val();
/* Dummy Html to emulate the situation I am */
val = "<b>" + val + "</b>";
generatePdfFromHtml(pdf, val, function(returnedPDF) {
console.log("Generated Pdf");
var blob = pdfFromCallback.output('blob');
/* Write Pdf into #display Iframe */
var blob_url = URL.createObjectURL(blob);
var iframeElementContainer = document.getElementById('display');
iframeElementContainer.src=blob_url;
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<form id="myform">
<input id="inputData" name="metallica" placeholder="Enter a metallica song"><button type="submit">Enter Sandman</button>
</form>
<iframe id="display" style="width:100%; height:100%; overflow:scroll;"></iframe>
如您所见,以下代码可以完成这项工作:
var blob_url = URL.createObjectURL(blob);
var iframeElementContainer = document.getElementById('display');
iframeElementContainer.src=blob_url;
换句话说,我们实际上生成了一个url,并将其设置为iframe的src。生成网址的肮脏工作是URL.createObjectURL
函数。