AngularJS ऐप में बूँद (.pdf) कैसे प्रदर्शित करें

Question

मैं पीडीएफ फाइल प्रदर्शित करने की कोशिश कर रहा हूं, जो मुझे एक $http.postप्रतिक्रिया के रूप में मिल रही है । <embed src>उदाहरण के लिए एप्लिकेशन को पीडीएफ को ऐप के भीतर प्रदर्शित किया जाना चाहिए ।

मुझे ढेर सारी पोस्ट मिलीं लेकिन किसी तरह मेरा उदाहरण काम नहीं कर रहा है।

जे एस:

इस डॉक्टर के अनुसार , मैंने कोशिश की और ...

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

अब मैं जो भी समझता हूं, fileURLवह एक अस्थायी URL बनाता है जिसे ब्लॉग संदर्भ के रूप में उपयोग कर सकता है।

HTML:

<embed src="{{content}}" width="200" height="200"></embed>

मुझे यकीन नहीं है कि इसे कोणीय में कैसे संभालना है, आदर्श स्थिति यह होगी (1) इसे एक गुंजाइश के लिए असाइन करें, (2) एक पीडीएफ में बूँद को 'तैयार / पुनर्निर्माण' करें (3) इसका उपयोग करके HTML पास करें <embed>क्योंकि मैं एप्लिकेशन के भीतर इसे प्रदर्शित करना चाहते हैं।

मैं अब एक दिन से अधिक समय से शोध कर रहा हूं, लेकिन किसी तरह मैं समझ नहीं पा रहा हूं कि यह कोणीय में कैसे काम करता है ... और चलो बस पीडीएफ दर्शक पुस्तकालयों को मान लें कि कोई विकल्प नहीं था।

Comments

हाय डी'लो डेक्जॉइसर, क्या आपने कोणीय के माध्यम से पीडीएफ जेनरेट करने की अपनी समस्या का प्रबंधन किया है?

— रेमंड नाकम्पे

@michael D'lo DeProjuicer कोणीय 2 में एक ही मामले के लिए क्या किया जाना चाहिए?

— मोनिका

Answer 1

सबसे पहले आपको इसे सेट करने की आवश्यकता responseTypeहै arraybuffer। यह आवश्यक है यदि आप अपने डेटा की एक बूँद बनाना चाहते हैं। Sending_and_Receiving_Binary_Data देखें । तो आपका कोड इस तरह दिखेगा:

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

अगला भाग है, आपको अपने यूआरएल पर कोणीय विश्वास करने के लिए $ sce सेवा का उपयोग करने की आवश्यकता है । इसे इस तरह से किया जा सकता है:

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

$ Sce को इंजेक्ट करना न भूलें सेवा ।

यदि यह सब किया जाता है, तो आप अपने पीडीएफ को एम्बेड कर सकते हैं:

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

Comments

मेरे लिए यह क्रोम (35.0.1916.114 मीटर) में काम नहीं किया। इसे <एम्बेड> के बजाय <ऑब्जेक्ट>: <ऑब्जेक्ट डेटा = "{{कंटेंट}}" टाइप = "एप्लिकेशन / पीडीएफ"> </ ऑब्जेक्ट>

— HoffZ

मेरे लिए (AngularJS 1.25) मुझे करना था: नया बूँद ([response.data]

— मार्टिन कॉनेल

@ हॉफज: मैंने क्षेत्र को $http.getनिर्दिष्ट करते हुए शॉर्टकट तरीके को एक पूर्ण के साथ बदल दिया responseType: { 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' }और यह काम करता है :)

— निकोले मेलनिकोव

मेरे लिए यह काम करने का एकमात्र तरीका response.dataइसके बजाय बूँद को बनाना था response, इस तरह से:var file = new Blob([response.data], {type: 'application/pdf'});

— Alekos Filini

@ yosep-kim यह IE पर काम नहीं करता है क्योंकि URL ऑब्जेक्ट IE में मौजूद नहीं है: caniuse.com/#search=URL

— कार्लोस

Answer 2

मैं AngularJS v1.3.4 का उपयोग करता हूं

HTML:

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

जेएस नियंत्रक:

'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();
            });
        };
});

जेएस सेवाएं:

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

जावा रेस्ट वेब सेवा - स्प्रिंग एमवीसी:

@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;
    }

Comments

सफारी का कौन सा संस्करण? window.URL सफारी 9 में और उसके बाद अच्छा है: caniuse.com/#search=createObjectURL

— स्टीफन ग्रिलॉन

मैंने अपने मैकबुक प्रो और सफारी 9.0.2 का परीक्षण और सत्यापन किया।

— स्टीफन ग्रिलॉन

वही, मैकबुक एल कप्तान। window.URL.createObjectURL (फ़ाइल); मुझे समस्या नहीं है लेकिन कोड काम नहीं करता है। क्या मैं कुछ गलत कर सकता हूँ कोई शुक्रिया। मेरे पास यह जाँचने का समय नहीं है कि यह काम नहीं कर रहा है और FileSaver.js का उपयोग करें

— fdrv

यदि आपका आवेदन ऑनलाइन है, तो कृपया अपना URL पोस्ट करें? क्या आपका वही बैक-एंड है?

— स्टीफन ग्रिलॉन

डाउनलोड विशेषता सफारी में समर्थित नहीं है। caniuse.com/#search=download

— बिश्वनाथ

Answer 3

माइकल के सुझाव मेरे लिए एक आकर्षण की तरह काम करते हैं :) यदि आप $ http.post को http.get के साथ बदलते हैं, तो याद रखें कि .get विधि 3 के बजाय 2 मापदंडों को स्वीकार करती है ... यह वह जगह है जहां मेरा समय बर्बाद होता है ...;)

नियंत्रक:

$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);
});

राय:

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

Comments

responseType:'arraybuffer', बस मुझे सोने के घंटे के एक जोड़े को बचाया! +1

— 22

html में इसे प्रिंट करने के बजाय सेव को ट्रिगर कैसे करें?

— fdrv

धन्यवाद, यह मेरे कुछ घंटों को बचाया, आप भी जगह ले सकता है $scope.content = $sce.trustAsResourceUrl(fileURL);के साथ $window.open(fileURL, '_self', '');और पूर्ण स्क्रीन पर फ़ाइल खोलें।

— तावीतोस

Answer 4

मुझे ओपेरा ब्राउज़र के साथ "window.URL" का उपयोग करने में कठिनाइयों का सामना करना पड़ा क्योंकि इससे "अपरिभाषित" परिणाम होगा। इसके अलावा, window.URL के साथ, पीडीएफ दस्तावेज़ इंटरनेट एक्सप्लोरर और माइक्रोसॉफ्ट एज में कभी नहीं खोला गया (यह हमेशा के लिए इंतजार रहेगा)। मैं निम्नलिखित समाधान के साथ आया था जो IE, एज, फ़ायरफ़ॉक्स, क्रोम और ओपेरा (सफारी के साथ परीक्षण नहीं किया गया है) में काम करता है:

$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);
    }
}

मुझे पता है अगर यह मदद की! :)

Comments

यह दृष्टिकोण IE में ब्राउज़र विंडो में पीडीएफ दस्तावेज़ नहीं खोलता है, लेकिन उपयोगकर्ता को इसे डाउनलोड करने के लिए संकेत देता है। क्या इसके आसपास कोई काम है?

— sdd

उपरोक्त कोड पीडीएफ फाइल को डाउनलोड करना है और अपने डिफ़ॉल्ट पीडीएफ रीडर एप को इसे खोलने के लिए ले जाना है। यहां तक ​​कि यह मोबाइल उपकरणों पर भी अच्छा काम करता है। कारण यह है, जबकि मैं कुछ ब्राउज़रों पर पीडीएफ खोलने में सक्षम था, मैं इसे अन्य लोगों पर नहीं खोल सकता था। इसलिए मैंने सोचा कि ऐसा समाधान होना सबसे अच्छा है जो पीडीएफ फाइल डाउनलोड करने के लिए सभी ब्राउज़रों (मोबाइल ब्राउज़रों सहित) पर चले।

— मैनुअल हर्नांडेज़

पीडीएफ को एक नए टैब में देखने के लिए आप निम्न कोड का उपयोग कर सकते हैं: window.open (Reader.result, '_blank');

— 21

Answer 5

जोड़ना responseType अनुरोध है कि कोणीय से बनाया गया है करने के लिए वास्तव में समाधान है, लेकिन मेरे लिए यह काम जब तक मैं निर्धारित किया है नहीं किया responseType को ब्लॉब , arrayBuffer के लिए नहीं। कोड स्व व्याख्यात्मक है:

    $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) {   
        });

Comments

वास्तव में, 'blob'प्रकार के साथ यह छोटा लिखना संभव है:FileSaver.saveAs(response.data, getFileNameFromHttpResponse(response)); बनाने की कोई आवश्यकता नहीं हैBlob

— Alena Kastsiukavets

Answer 6

मैंने पिछले कुछ दिनों से pdfs और छवियों को डाउनलोड करने की कोशिश कर रहे लोगों के लिए संघर्ष किया है, सभी मैं डाउनलोड करने में सक्षम था सरल पाठ फाइलें।

अधिकांश प्रश्नों में समान घटक होते हैं, लेकिन इसे काम करने के लिए सही क्रम का पता लगाने में थोड़ा समय लगता है।

धन्यवाद @Nikolay Melnikov, आपकी टिप्पणी / इस सवाल का जवाब क्या काम किया था।

संक्षेप में, यहाँ मेरी AngularJS सेवा बैकएंड कॉल है:

  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'
    });
  }

मेरे नियंत्रक से:

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
    });
}

Answer 7

सबसे हालिया उत्तर (कोणीय 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" />

Answer 8

कोड का एक सुझाव जो मैंने अभी अपने प्रोजेक्ट में 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;" />

Comments

कृपया कुछ संक्षिप्त भी जोड़ें।

— फरहाना