отображать PDF с возвращенными данными - не iframe - с помощью вызова ajax - JQuery

Question

Этот вопрос не отвечает на мою ситуацию, так как он не дает решения, и мне интересно, есть ли у нас (к 2018 году) лучший подход.

Итак, проблема в том,Я хотел бы назвать мой сервер, который создает файл pdf (не физически) и передает содержимое файла в виде потока на http response.Теперь, с помощью ajax-вызова этой веб-службы, я хочу отобразить возвращенные данные в виде файла PDF, если это возможно.

function callProducePdf(webServiceUrl, resultAreaId){
        var jqxhr = $.ajax({
            type:"GET",
            url: webServiceUrl
        });

        jqxhr.done(function(data){
            //data contains the pdf in inputStream form
            //how can I display the pdf in resultAreaId which is a div?             

            //if I do something like this it works but this is not what I want
            var iframe = $('<iframe height="500px">');
            iframe.attr('src', webServiceUrl);
            resultAreaId.prepend(iframe, "<br>");
        });

        jqxhr.fail(function(){
            //I have this function defined which is working fine
            appendError(resultAreaId);
        });
    }

код на стороне сервера:

@GetMapping("/producePdfWithDefault")
public ModelAndView producePdfWithDefault(HttpServletRequest request, HttpServletResponse response) {
    Resource resource = new ClassPathResource("/path/a/static/pdf/file.pdf");       
    InputStream resourceAsStream;
    try {
        resourceAsStream = resource.getInputStream();
        byte[] resourceInBytes = Base64.encodeBase64(IOUtils.toByteArray(resourceAsStream));
        response.reset();
        response.setContentType("application/pdf");
        response.setHeader("content-disposition","inline; filename=documentPreview.pdf");
        response.setContentLength(resourceInBytes.length); 
        OutputStream output = response.getOutputStream();
        output.write(resourceInBytes);
        output.flush();
        output.close();
    } catch (IOException e) {
            response.setStatus(500);
    }
    return null;
}

Любая помощьочень признателен.Спасибо ..

Answer 1

Вы можете использовать PDF.js для рендеринга вашего PDF в canvas элемент.

Демонстрация ниже взята из их примеров

// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
var pdfData = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

// Using DocumentInitParameters object to load binary data.
var loadingTask = pdfjsLib.getDocument({
  data: pdfData
});
loadingTask.promise.then(function(pdf) {
  console.log('PDF loaded');

  // Fetch the first page
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');

    var scale = 1.5;
    var viewport = page.getViewport(scale);

    // Prepare canvas using PDF page dimensions
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function() {
      console.log('Page rendered');
    });
  });
}, function(reason) {
  // PDF loading error
  console.error(reason);
});

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<h1>PDF.js 'Hello, base64!' example</h1>

<canvas id="the-canvas"></canvas>

Answer 2

Я бы сделал что-то вроде этого ...

...
jqxhr.done(function(data) {
  var blob = new Blob([data]);
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = "<ANY_FILENAME_WITH_EXTENSION>";
  link.click();
}),
...

(не проверено)

Клиент загрузит файл и откроет его в программе чтения PDF по умолчанию.