Próbowałem wyświetlić plik pdf, który otrzymuję jako kroplę z $http.post
odpowiedzi. Plik PDF musi być wyświetlany w aplikacji za pomocą <embed src>
np.
Natknąłem się na kilka postów na stosie, ale jakoś mój przykład nie działa.
JS:
Według tego doktora kontynuowałem i próbowałem ...
$http.post('/postUrlHere',{myParams}).success(function (response) {
var file = new Blob([response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.content = fileURL;
});
Teraz z tego, co rozumiem, fileURL
tworzy tymczasowy adres URL, którego blog może używać jako odniesienia.
HTML:
<embed src="{{content}}" width="200" height="200"></embed>
Nie jestem pewien, jak sobie z tym poradzić w Angular, idealną sytuacją byłoby (1) przypisanie go do zakresu, (2) „przygotowanie / przebudowanie” obiektu blob do pliku pdf (3) przekazanie go do HTML za pomocą, <embed>
ponieważ ja chcesz go wyświetlić w aplikacji.
Badam od ponad dnia, ale jakoś nie mogę zrozumieć, jak to działa w Angular ... I załóżmy, że biblioteki przeglądarek PDF nie były dostępne.
Odpowiedzi:
Przede wszystkim musisz ustawić
responseType
toarraybuffer
. Jest to wymagane, jeśli chcesz utworzyć obiekt blob swoich danych. Zobacz Sending_and_Receiving_Binary_Data . Twój kod będzie więc wyglądał następująco:Następna część polega na tym, że musisz użyć usługi $ sce , aby uzyskać zaufanie kątowe do swojego adresu URL. Można to zrobić w następujący sposób:
Nie zapomnij wstrzyknąć usługi $ sce .
Jeśli to wszystko jest zrobione, możesz teraz osadzić swój plik PDF:
źródło
$http.get
na pełną, podającresponseType
pole:{ url: "http://127.0.0.1:8080/resources/jobs/af471106-2e71-4fe6-946c-cd1809c659e5/result/?key="+$scope.key, method: "GET", headers: { 'Accept': 'application/pdf' }, responseType: 'arraybuffer' }
I działa :)response.data
zamiastresponse
tego:var file = new Blob([response.data], {type: 'application/pdf'});
Używam AngularJS v1.3.4
HTML:
Kontroler JS:
Usługi JS:
Usługi sieciowe Java REST - Spring MVC:
źródło
sugestie Michaela działają dla mnie jak urok :) Jeśli zamienisz $ http.post na $ http.get, pamiętaj, że metoda .get akceptuje 2 parametry zamiast 3 ... to jest strata czasu ...;)
kontroler:
widok:
źródło
responseType:'arraybuffer'
, właśnie zaoszczędziłem kilka godzin snu! +1$scope.content = $sce.trustAsResourceUrl(fileURL);
z$window.open(fileURL, '_self', '');
i otwórz plik na pełnym ekranie.Napotkałem trudności podczas używania „window.URL” w przeglądarce Opera Browser, ponieważ spowodowałoby to „undefined”. Ponadto w przypadku window.URL dokument PDF nigdy nie otwierał się w przeglądarce Internet Explorer i Microsoft Edge (czekałby na zawsze). Wymyśliłem następujące rozwiązanie, które działa w IE, Edge, Firefox, Chrome i Opera (nie testowałem z Safari):
Daj mi znać, jeśli to pomogło! :)
źródło
Dodanie responseType do żądania utworzonego z angular jest rzeczywiście rozwiązaniem, ale dla mnie nie zadziałało, dopóki nie ustawiłem responseType na blob , a nie na arrayBuffer. Kod jest oczywisty:
źródło
'blob'
czcionką można pisać krócej:FileSaver.saveAs(response.data, getFileNameFromHttpResponse(response));
Nie trzeba tworzyćBlob
Przez ostatnie kilka dni zmagałem się z pobieraniem plików PDF i obrazów, wszystko, co udało mi się pobrać, to proste pliki tekstowe.
Większość pytań ma te same elementy, ale ustalenie właściwej kolejności zajęło trochę czasu.
Dziękuję @Nikolay Melnikov, Twój komentarz / odpowiedź na to pytanie sprawiło, że zadziałało.
W skrócie, oto moje wywołanie backendowe usługi AngularJS:
Z mojego kontrolera:
źródło
Najnowsza odpowiedź (dla Angular 8+):
źródło
Propozycja kodu, którego właśnie użyłem w moim projekcie przy użyciu AngularJS v1.7.2
źródło