Wyświetlanie pdf z arraybuffer

Question

Wracam strumień danych z laravel dompdf z tym kodem

$pdf = \App::make('dompdf.wrapper'); 
$pdf->loadHTML("<div>This is test</div>"); 
return $pdf->stream(); 

A to moja JS kod ajax

$.ajax({ 
     type:"GET", 
     url: "/display", 
     responseType: 'arraybuffer' 
    }).done(function(response) { 
     var blob = new Blob([response.data], {type: 'application/pdf'}); 
     var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW"; 
     $("#pdfviewer").attr("data",pdfurl); 
    }); 

Oto HTML do wyświetlania plików PDF po ajax

<object id="pdfviewer" data="/files/sample.pdf" type="application/pdf" style="width:100%;height:500px;"></object> 

Dostaję poniżej błędu

Nie udało się załadować dokument PDF

Proszę pomóc rozwiązać ten problem. Jak wyświetlić plik PDF.

Answer 1

jQuery.ajax() nie posiada ustawienie responseType domyślnie. Możesz użyć polyfill, na przykład jquery-ajax-blob-arraybuffer.js, który implementuje transport danych binarnych lub użyć fetch().

Należy również zauważyć, chrom, chrom mają problemy z wyświetlaniem .pdf na zarówno <object> i <embed> elementów, patrz Displaying PDF using object embed tag with blob URL, Embed a Blob using PDFObject. Zastąp element przy użyciu elementu dla elementu <object>.

$(function() { 

    var pdfsrc = "/display"; 

    var jQueryAjaxBlobArrayBuffer = "https://gist.githubusercontent.com/SaneMethod/" 
         + "7548768/raw/ae22b1fa2e6f56ae6c87ad0d7fbae8fd511e781f/" 
         + "jquery-ajax-blob-arraybuffer.js"; 

    var script = $("<script>"); 

    $.get(jQueryAjaxBlobArrayBuffer) 
    .then(function(data) { 
    script.text(data).appendTo("body") 
    }, function(err) { 
    console.log(err); 
    }) 
    .then(function() { 
    $.ajax({ 
     url: pdfsrc, 
     dataType: "arraybuffer" 
    }) 
    .then(function(data) { 
     // do stuff with `data` 
     console.log(data, data instanceof ArrayBuffer); 
     $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], { 
      type: "application/pdf" 
      }))) 
    }, function(err) { 
      console.log(err); 
    }); 

    }); 
}); 

Stosując fetch(), .arrayBuffer()

var pdfsrc = "/display"; 

    fetch(pdfsrc) 
    .then(function(response) { 
    return response.arrayBuffer() 
    }) 
    .then(function(data) { 
    // do stuff with `data` 
    console.log(data, data instanceof ArrayBuffer); 
    $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], { 
     type: "application/pdf" 
    }))) 
    }, function(err) { 
     console.log(err); 
    }); 

plnkr http://plnkr.co/edit/9R5WcsMSWQaTbgNdY3RJ?p=preview

wersja 1 jquery-ajax-blob-arraybuffer.js, jQuery.ajax(); wersja 2 fetch(), .arrayBuffer()

Answer 2

Z moich testach responce jest odpowiedzią nie response.data, więc dodaje powinno działać:

$.ajax({ 
     type:"GET", 
     url: "/display", 
     responseType: 'arraybuffer' 
    }).done(function(response) { 
     var blob = new Blob([response], {type: 'application/pdf'}); 
     var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW"; 
     $("#pdfviewer").attr("data",pdfurl); 
    }); 

Chociaż wydaje JQuery robi coś z responce powodując pusty wyjście PDF ... (PDF is blank when downloading using javascript). To będzie działać:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'test.pdf', true); 
xhr.responseType = 'arraybuffer'; 
xhr.onload = function(e) { 
    if (this.status == 200) { 
     var blob=new Blob([this.response], {type:"application/pdf"}); 
     var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW"; 
     $("#pdfviewer").attr("data",pdfurl); 
    } 
}; 
xhr.send(); 

Answer 3

Lubię guest271314 odpowiedź dużo, zwłaszcza drugą wersję używając sprowadzić, ale chciałem dodać roztwór, który nie korzysta z PolyFill lub technologię eksperymentalną jak fetch.

To rozwiązanie wykorzystuje macierzystą XMLHttpRequest API do utworzenia żądania. To pozwala nam zmienić responseType na arrayBuffer.

var xhr = new XMLHttpRequest(); 
    var pdfsrc = "https://upload.wikimedia.org/wikipedia/en/6/62/Definition_of_management.pdf"; 
    xhr.open('GET', pdfsrc, true); 
    xhr.responseType = "arraybuffer"; 

    xhr.addEventListener("load", function (evt) { 
    var data = evt.target.response; 
    if (this.status === 200) { 
     $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], { 
     type: "application/pdf" 
     }))); 
    } 
    }, false); 

    xhr.send(); 

I rozwidlone guest271314s plnkr pokazać tę metodę w akcji: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview