Блог

Главная - Вопросы по программированию - Поместите сгенерированный в JSPDF файл PDF в iframe

Поместите сгенерированный в JSPDF файл PDF в iframe

#javascript #pdf #blob #jspdf #pdf.js

#javascript #PDF #большой двоичный объект #jspdf #pdf.js

Вопрос:

У меня есть следующий фрагмент кода, который генерирует PDF с помощьюhttps://github.com/MrRio/jsPDF библиотека:

 var generatePdfFromHtml = function(pdf, html, callback) {
  console.log("Generating Pdf");
  pdf.html(html, {
    'callback': function(pdf) {
      if (callback amp;amp; 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 */
    });
  });

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

Я хочу поместить сгенерированный большой двоичный файл PDF в iframe с идентификатором #display вы знаете, как это сделать?

Я также обнаружил, что Mozilla сделала pdf.js , позволяющую нам изменять формат PDF, когда он не поддерживается, таким образом, в случае, если рендеринг pdf не поддерживается, как я могу использовать pdf.js чтобы отобразить его?

Ответ №1:

Посмотрите на этот код, который я отредактировал, чтобы отобразить PDF в iframe :

 var generatePdfFromHtml = function(pdf, html, callback) {
  console.log("Generating Pdf");
  pdf.html(html, {
    'callback': function(pdf) {
      if (callback amp;amp; 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-адрес и устанавливаем его в качестве src iframe. Грязная работа по генерации URL-адреса — это URL.createObjectURL функция.