Saya mencoba menampilkan file pdf yang saya dapatkan sebagai blob dari file $http.post
respons. PDF harus ditampilkan dalam aplikasi menggunakan <embed src>
misalnya.
Saya menemukan beberapa tumpukan posting tetapi entah bagaimana contoh saya sepertinya tidak berfungsi.
JS:
Menurut dokumen ini , saya melanjutkan dan mencoba ...
$http.post('/postUrlHere',{myParams}).success(function (response) {
var file = new Blob([response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.content = fileURL;
});
Nah dari apa yang saya pahami, fileURL
buatlah URL sementara yang bisa digunakan blog sebagai referensi.
HTML:
<embed src="{{content}}" width="200" height="200"></embed>
Saya tidak yakin bagaimana menangani ini di Angular, situasi yang ideal adalah (1) menetapkannya ke ruang lingkup, (2) 'mempersiapkan / membangun kembali' blob ke pdf (3) meneruskannya ke HTML menggunakan <embed>
karena saya ingin menampilkannya di dalam aplikasi.
Saya telah meneliti selama lebih dari satu hari sekarang tetapi entah bagaimana saya sepertinya tidak dapat memahami cara kerjanya di Angular ... Dan anggap saja perpustakaan penampil pdf di luar sana tidak ada pilihan.
Jawaban:
Pertama-tama, Anda perlu menyetel
responseType
kearraybuffer
. Ini diperlukan jika Anda ingin membuat blob dari data Anda. Lihat Sending_and_Receiving_Binary_Data . Jadi kode Anda akan terlihat seperti ini:Bagian selanjutnya adalah, Anda perlu menggunakan layanan $ sce untuk mempercayai sudut url Anda. Ini dapat dilakukan dengan cara ini:
Jangan lupa untuk menginjeksi layanan $ sce .
Jika ini semua sudah selesai Anda sekarang dapat menyematkan pdf Anda:
sumber
$http.get
dengan yang lengkap, menentukanresponseType
bidangnya:{ 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' }
Dan berhasil :)response.data
bukanresponse
, seperti ini:var file = new Blob([response.data], {type: 'application/pdf'});
Saya menggunakan AngularJS v1.3.4
HTML:
Pengontrol JS:
Layanan JS:
Layanan Web REST Java - Spring MVC:
sumber
saran michael bekerja seperti pesona bagi saya :) Jika Anda mengganti $ http.post dengan $ http.get, ingatlah bahwa metode .get menerima 2 parameter, bukan 3 ... di sinilah waktu saya terbuang ...;)
pengontrol:
melihat:
sumber
responseType:'arraybuffer'
, baru saja menghemat beberapa jam tidur! +1$scope.content = $sce.trustAsResourceUrl(fileURL);
dengan$window.open(fileURL, '_self', '');
dan membuka file di fullscreen.Saya menghadapi kesulitan dalam menggunakan "window.URL" dengan Opera Browser karena akan mengakibatkan "tidak terdefinisi". Juga, dengan window.URL, dokumen PDF tidak pernah dibuka di Internet Explorer dan Microsoft Edge (akan tetap menunggu selamanya). Saya datang dengan solusi berikut yang berfungsi di IE, Edge, Firefox, Chrome dan Opera (belum diuji dengan Safari):
Beri tahu saya jika itu membantu! :)
sumber
Menambahkan responseType ke permintaan yang dibuat dari sudut memang solusinya, tetapi bagi saya itu tidak berhasil sampai saya menetapkan responseType ke blob , bukan ke arrayBuffer. Kode tersebut cukup jelas:
sumber
'blob'
jenis itu mungkin untuk menulis lebih pendek:FileSaver.saveAs(response.data, getFileNameFromHttpResponse(response));
Tidak perlu membuatBlob
Saya telah berjuang selama beberapa hari terakhir mencoba mengunduh pdf dan gambar, yang bisa saya unduh hanyalah file teks sederhana.
Sebagian besar pertanyaan memiliki komponen yang sama, tetapi perlu waktu beberapa saat untuk menemukan urutan yang tepat agar dapat berfungsi.
Terima kasih @Nikolay Melnikov, komentar / balasan Anda atas pertanyaan ini yang membuatnya berhasil.
Singkatnya, inilah panggilan backend AngularJS Service saya:
Dari pengontrol saya:
sumber
Jawaban terbaru (untuk Angular 8+):
sumber
Saran kode yang baru saja saya gunakan dalam proyek saya menggunakan AngularJS v1.7.2
sumber