Cara Menampilkan blob (.pdf) di aplikasi AngularJS

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, fileURLbuatlah 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.

Pertama-tama, Anda perlu menyetel responseTypeke arraybuffer. Ini diperlukan jika Anda ingin membuat blob dari data Anda. Lihat Sending_and_Receiving_Binary_Data . Jadi kode Anda akan terlihat seperti ini:

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

Bagian selanjutnya adalah, Anda perlu menggunakan layanan $ sce untuk mempercayai sudut url Anda. Ini dapat dilakukan dengan cara ini:

$scope.content = $sce.trustAsResourceUrl(fileURL);

Jangan lupa untuk menginjeksi layanan $ sce .

Jika ini semua sudah selesai Anda sekarang dapat menyematkan pdf Anda:

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>

Saya menggunakan AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

Pengontrol JS:

'use strict';
angular.module('xxxxxxxxApp')
    .controller('xxxxController', function ($scope, xxxxServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            xxxxServicePDF.downloadPdf().then(function (result) {
                var file = new Blob([result.data], {type: 'application/pdf'});
                var fileURL = window.URL.createObjectURL(file);
                a.href = fileURL;
                a.download = fileName;
                a.click();
            });
        };
});

Layanan JS:

angular.module('xxxxxxxxApp')
    .factory('xxxxServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

Layanan Web REST Java - Spring MVC:

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
    public ResponseEntity<byte[]> getPDF() {
        FileInputStream fileStream;
        try {
            fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));
            byte[] contents = IOUtils.toByteArray(fileStream);
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.parseMediaType("application/pdf"));
            String filename = "test.pdf";
            headers.setContentDispositionFormData(filename, filename);
            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
            return response;
        } catch (FileNotFoundException e) {
           System.err.println(e);
        } catch (IOException e) {
            System.err.println(e);
        }
        return null;
    }

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:

$http.get('/getdoc/' + $stateParams.id,     
{responseType:'arraybuffer'})
  .success(function (response) {
     var file = new Blob([(response)], {type: 'application/pdf'});
     var fileURL = URL.createObjectURL(file);
     $scope.content = $sce.trustAsResourceUrl(fileURL);
});

melihat:

<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>

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):

$http.post(postUrl, data, {responseType: 'arraybuffer'})
.success(success).error(failed);

function success(data) {
   openPDF(data.data, "myPDFdoc.pdf");
};

function failed(error) {...};

function openPDF(resData, fileName) {
    var ieEDGE = navigator.userAgent.match(/Edge/g);
    var ie = navigator.userAgent.match(/.NET/g); // IE 11+
    var oldIE = navigator.userAgent.match(/MSIE/g); 

    var blob = new window.Blob([resData], { type: 'application/pdf' });

    if (ie || oldIE || ieEDGE) {
       window.navigator.msSaveBlob(blob, fileName);
    }
    else {
       var reader = new window.FileReader();
       reader.onloadend = function () {
          window.location.href = reader.result;
       };
       reader.readAsDataURL(blob);
    }
}

Beri tahu saya jika itu membantu! :)

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:

    $http({
            method : 'GET',
            url : 'api/paperAttachments/download/' + id,
            responseType: "blob"
        }).then(function successCallback(response) {
            console.log(response);
             var blob = new Blob([response.data]);
             FileSaver.saveAs(blob, getFileNameFromHttpResponse(response));
        }, function errorCallback(response) {   
        });

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:

  getDownloadUrl(fileID){
    //
    //Get the download url of the file
    let fullPath = this.paths.downloadServerURL + fileId;
    //
    // return the file as arraybuffer 
    return this.$http.get(fullPath, {
      headers: {
        'Authorization': 'Bearer ' + this.sessionService.getToken()
      },
      responseType: 'arraybuffer'
    });
  }

Dari pengontrol saya:

downloadFile(){
   myService.getDownloadUrl(idOfTheFile).then( (response) => {
      //Create a new blob object
      let myBlobObject=new Blob([response.data],{ type:'application/pdf'});

      //Ideally the mime type can change based on the file extension
      //let myBlobObject=new Blob([response.data],{ type: mimeType});

      var url = window.URL || window.webkitURL
      var fileURL = url.createObjectURL(myBlobObject);
      var downloadLink = angular.element('<a></a>');
      downloadLink.attr('href',fileURL);
      downloadLink.attr('download',this.myFilesObj[documentId].name);
      downloadLink.attr('target','_self');
      downloadLink[0].click();//call click function
      url.revokeObjectURL(fileURL);//revoke the object from URL
    });
}

Jawaban terbaru (untuk Angular 8+):

this.http.post("your-url",params,{responseType:'arraybuffer' as 'json'}).subscribe(
  (res) => {
    this.showpdf(res);
  }
)};

public Content:SafeResourceUrl;
showpdf(response:ArrayBuffer) {
  var file = new Blob([response], {type: 'application/pdf'});
  var fileURL = URL.createObjectURL(file);
  this.Content = this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);
}

  HTML :

  <embed [src]="Content" style="width:200px;height:200px;" type="application/pdf" />

Saran kode yang baru saja saya gunakan dalam proyek saya menggunakan AngularJS v1.7.2

$http.get('LabelsPDF?ids=' + ids, { responseType: 'arraybuffer' })
            .then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                $scope.ContentPDF = $sce.trustAsResourceUrl(fileURL);
            });

<embed ng-src="{{ContentPDF}}" type="application/pdf" class="col-xs-12" style="height:100px; text-align:center;" />