অ্যাঙ্গুলারজেএস অ্যাপে ব্লব (.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 তৈরি হয় যা ব্লগটি উল্লেখ হিসাবে ব্যবহার করতে পারে।

এইচটিএমএল:

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

এঙ্গুলারে কীভাবে এটি পরিচালনা করতে হবে তা সম্পর্কে আমি নিশ্চিত নই, আদর্শ পরিস্থিতিটি হ'ল (১) এটিকে কোনও সুযোগে অর্পণ করা, (২) পিডিএফ-এ ব্লবটি 'প্রস্তুত / পুনর্নির্মাণ' (3) এটি এইচটিএমএলে পাস করে <embed>কারণ আমি অ্যাপ্লিকেশন মধ্যে এটি প্রদর্শন করতে চান।

আমি এখন এক দিনেরও বেশি সময় ধরে গবেষণা করছি তবে কোনওভাবেই আমি বুঝতে পারি না যে এটি কৌণিকভাবে এটি কীভাবে কাজ করে ... এবং আসুন আমরা পিডিএফ দর্শকের লাইব্রেরিগুলি ধরে নিই যে কোনও বিকল্প ছিল না।

Comments

হাই ডি'লো ডিপ্রোজুয়্যার, আপনি কৌণিক সংশোধন করে পিডিএফ উত্পন্ন করার সমস্যাটি পরিচালনা করতে পেরেছিলেন?

— রেমন্ড নাকাম্পে

@ মাইক্রেল ডি'লো ডিপ্রোজুয়র একই ক্ষেত্রে কৌনিক 2 তে কী করা উচিত?

— মনিকা

Answer 1

প্রথমে আপনাকে এটি সেট করতে responseTypeহবে arraybuffer। আপনি যদি আপনার ডেটার একটি ব্লব তৈরি করতে চান তবে এটি প্রয়োজনীয়। প্রেরণ_আর_প্রাপ্তি_বাইনারি_ডাটা দেখুন । সুতরাং আপনার কোডটি এর মতো দেখাবে:

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

পরের অংশটি হ'ল, আপনার ইউআরএলকে কৌনিক বিশ্বাসের জন্য আপনাকে service দর্শনীয় পরিষেবাটি ব্যবহার করতে হবে। এটি এই উপায়ে করা যেতে পারে:

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

$ দৃশ্য পরিষেবাটি ইনজেক্ট করতে ভুলবেন না ।

যদি এটি সম্পূর্ণ হয়ে যায় তবে আপনি এখন নিজের পিডিএফ এম্বেড করতে পারেন:

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

Comments

আমার জন্য এটি ক্রোমে কাজ করেনি (35.0.1916.114 মিটার)। <এম্বেড> এর পরিবর্তে <অবজেক্ট> ব্যবহার করে এটি সমাধান করুন: <অবজেক্ট ডেটা = "application {সামগ্রী} type" টাইপ = "অ্যাপ্লিকেশন / পিডিএফ"> </

— বিজেট

আমার জন্য (AngularJS 1.25) আমাকে করতে হয়েছিল: নতুন ব্লব ([প্রতিক্রিয়া.ডাটা]

— মার্টিন কনেল

@ হাফজেড: আমি ক্ষেত্রটি $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'});

— আলেকোস ফিলিনি ২

@ যোসেপ-কিম এটি আইইআর তে কাজ করে না কারণ আইআরএল

— কার্লোস

Answer 2

আমি AngularJS v1.3.4 ব্যবহার করি

এইচটিএমএল:

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

জাভা REST ওয়েব পরিষেবাদি - স্প্রিং এমভিসি:

@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

সাফারি কোন সংস্করণ? উইন্ডো.ইউআরএল সাফারি 9 এবং এর পরে ভাল: caniuse.com/#search=createObjectURL

— স্টাফেন

আমি আমার ম্যাকবুক প্রো এবং সাফারি 9.0.2 তে পরীক্ষা করেছি এবং তার মূল্যায়ন করেছি।

— স্টাফেন গ্রিলন

একই, ম্যাকবুক এল অধিনায়ক। window.URL.createObjectURL (ফাইল); সমস্যা যেখানে আছে তা আমি করি না তবে কোড কাজ করে না। আমি কিছু ভুল করতে পারে। আপনাকে ধন্যবাদ। এটি কী কাজ করছে না তা যাচাই করার এবং ফাইলসভার.জেএস ব্যবহার করার মতো সময় আমার নেই

— fdrv

আপনার আবেদনটি অনলাইনে থাকলে আপনার ইউআরএল পোস্ট করুন? আপনার কি একই ব্যাক-এন্ড আছে?

— স্টাফেন গ্রিলন

সাফারিটিতে ডাউনলোড বৈশিষ্ট্য সমর্থিত নয়। 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

— স্বারোগ

এইচটিএমএল মুদ্রণের পরিবর্তে সেভটি কীভাবে ট্রিগার করবেন?

— fdrv

আপনাকে ধন্যবাদ, এটি আমাকে কয়েক ঘন্টা বাঁচিয়েছে, আপনি এটির $scope.content = $sce.trustAsResourceUrl(fileURL);সাথে প্রতিস্থাপন করতে এবং $window.open(fileURL, '_self', '');ফাইলটি পুরো স্ক্রিনে খুলতে পারেন ।

— টাভিটোস

Answer 4

অপেরা ব্রাউজারের সাথে "উইন্ডো.ইউআরএল" ব্যবহার করতে আমি সমস্যার মুখোমুখি হলাম কারণ এটি "অপরিজ্ঞাত" হতে পারে। এছাড়াও, উইন্ডো.ইউআরএল, পিডিএফ ডকুমেন্টটি ইন্টারনেট এক্সপ্লোরার এবং মাইক্রোসফ্ট এজে কখনও খোলে না (এটি চিরকাল অপেক্ষা করা থাকবে)। আমি নীচের সমাধানটি নিয়ে এসেছি যা আইই, এজ, ফায়ারফক্স, ক্রোম এবং অপেরাতে (সাফারি দিয়ে পরীক্ষা করা হয়নি) কাজ করে:

$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

এই পদ্ধতির আইই ব্রাউজার উইন্ডোতে পিডিএফ ডকুমেন্টটি খোলেন না তবে ব্যবহারকারীকে এটি ডাউনলোড করতে অনুরোধ জানায়। এর আশেপাশে কোন কাজ আছে?

— Sep

উপরের কোডটি পিডিএফ ফাইলটি ডাউনলোড করা এবং এটি খোলার জন্য আপনার ডিফল্ট পিডিএফ রিডার অ্যাপটিকে গ্রহণ করতে দিন। এমনকি এটি মোবাইল ডিভাইসে ভাল কাজ করে works কারণটি হ'ল, আমি যখন কিছু ব্রাউজারে পিডিএফ খুলতে সক্ষম হয়েছি তখন আমি অন্যগুলি এটি খুলতে পারি নি। সুতরাং আমি ভেবেছিলাম পিডিএফ ফাইল ডাউনলোড করার জন্য এমন একটি সমাধান দেওয়া ভাল যা সমস্ত ব্রাউজারগুলিতে (মোবাইল ব্রাউজার সহ) চলবে।

— ম্যানুয়েল হার্নান্দেজ

আপনি একটি নতুন ট্যাবে পিডিএফ দেখতে নীচের কোডটি ব্যবহার করতে পারেন: উইন্ডো.ওপেন (রিডার। রিসাল্ট, '_ব্ল্যাঙ্ক');

— সামনারিক

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

— আলেনা ক্যাসটসিয়ুকভেটস

Answer 6

আমি গত দু'দিন ধরে পিডিএফ এবং চিত্রগুলি ডাউনলোড করার চেষ্টা করে অনেক সংগ্রাম করেছি, আমি ডাউনলোড করতে সক্ষম হয়েছি সমস্ত সাধারণ পাঠ্য ফাইল।

বেশিরভাগ প্রশ্নের একই উপাদান থাকে তবে এটিকে কার্যকর করার জন্য সঠিক ক্রমটি বের করতে কিছুটা সময় নিয়েছিল।

আপনাকে ধন্যবাদ নিকোলে মেলানিকভ, এই প্রশ্নের আপনার মন্তব্য / জবাবটি এটি কার্যকর করেছিল।

সংক্ষেপে, এখানে আমার 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

খুব সংক্ষেপে যোগ করুন।

— ফারহানা