У меня есть следующий фрагмент кода, который создает PDF-файл с использованием библиотеки https://github.com/MrRio/jsPDF:
var generatePdfFromHtml = function(pdf, html, callback) {
console.info("Generating Pdf");
pdf.html(html, {
'callback': function(pdf) {
if (callback && typeof callback === 'function') {
console.info("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.info(blob)
/* Write Pdf into #display Iframe */
});
});
});
<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"></iframe>
Я хочу поместить сгенерированный blob pdf в iframe с идентификатором #display
вы знаете, как это сделать?
Я также обнаружил, что Mozilla создала pdf.js
, позволяющую нам рендерить pdf, когда он не поддерживается, поэтому в случае, если рендеринг pdf не поддерживается, как я могу использовать pdf.js для его рендеринга?
Посмотрите на этот код, который я отредактировал, чтобы преобразовать pdf в iframe
:
var generatePdfFromHtml = function(pdf, html, callback) {
console.info("Generating Pdf");
pdf.html(html, {
'callback': function(pdf) {
if (callback && typeof callback === 'function') {
console.info("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.info("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. Грязная работа по генерации URL — это функция URL.createObjectURL
.