दिलचस्प पोस्ट
सी # में एकाधिक कुंजी चढ़ाव पर कब्जा संपादन टेक्स्ट त्रुटि आइकन और पासवर्ड को दिखाए रखें जावा में एक्सएमएल डेटटाइम को पार्स करने का सबसे अच्छा तरीका क्या है? गैर-अवरुद्ध या अतुल्यकालिक I / O Node.js में क्या है? सी # में SQL कोड को पार्स करना मैक ओएस एक्स पर XAMPP अनुमतियाँ? एक अनाम फ़ंक्शन के साथ कक्षा संपत्ति को प्रारंभ करें मैक से विंडोज तक न्यूलाइन फॉर्मेटिंग परिवर्तित करना मैं Python का उपयोग कर एक वेबसाइट का एक स्क्रीनशॉट / छवि कैसे ले सकता / सकती हूं? जीमेल विस्तार, पृष्ठ संदर्भ से पृष्ठभूमि में संदेश भेजें JavaScript का उपयोग करके <textarea> पंक्तियों की संख्या कैसे प्राप्त करें? jquery एक लंगर करने के लिए चिकनी स्क्रॉल? निर्धारित करें कि क्या कोई तत्व jQuery के साथ एक सीएसएस वर्ग है सी # का उपयोग करके मेरी स्ट्रिंग मैच करने के लिए मैं कॉम्बो बॉक्स में चुने गए आइटम को कैसे सेट करूं? $ के अंदर का फॉर्म

एन्जिलर 2 एडीआई से पीडीएफ डाउनलोड करें और इसे देखें में दिखाएं

मैं एंगल 2 बीटा सीख रहा हूं मुझे आश्चर्य है कि कैसे एडीआई से पीडीएफ फाइल को डाउनलोड करें और इसे मेरे विचार में प्रदर्शित करें? मैंने निम्न का उपयोग करने के लिए अनुरोध करने का प्रयास किया है:

var headers = new Headers(); headers.append('Accept', 'application/pdf'); var options = new ResponseOptions({ headers: headers }); var response = new Response(options); this.http.get(this.setUrl(endpoint), response).map(res => res.arrayBuffer()).subscribe(r=>{ console.log(r); }) 
  • कृपया ध्यान दें कि मैं केवल console.log का मान देखने के लिए console.log का उपयोग कर रहा हूँ

लेकिन मुझे हमेशा निम्न अपवाद संदेश मिलता है:

"सरणीबफर ()" विधि प्रतिक्रिया सुपर क्लास पर लागू नहीं है

क्या ऐसा इसलिए है कि अभी तक अंगुरी 2 बीटा में यह विधि तैयार नहीं है? या क्या कोई गलती है जो मैंने बनाया है?

किसी भी सहायता की सराहना की जाएगी। आपका बहुत बहुत धन्यवाद।

वेब के समाधान से एकत्रित समाधान "एन्जिलर 2 एडीआई से पीडीएफ डाउनलोड करें और इसे देखें में दिखाएं"

वास्तव में, यह सुविधा अभी भी एचटीपीपी समर्थन में लागू नहीं हुई है।

एक वैकल्पिक हल के रूप में, आपको नीचे दिए गए वर्णों के रूप में Angular2 के BrowserXhr वर्ग को विस्तारित करने की आवश्यकता है, जो नीचे दिए गए एक्सर ऑब्जेक्ट पर blob लिए responseType टाइप करें:

 import {Injectable} from 'angular2/core'; import {BrowserXhr} from 'angular2/http'; @Injectable() export class CustomBrowserXhr extends BrowserXhr { constructor() {} build(): any { let xhr = super.build(); xhr.responseType = "blob"; return <any>(xhr); } } 

फिर आपको Blob ऑब्जेक्ट में प्रतिक्रिया पेलोड को लपेटने और डाउनलोड संवाद खोलने के लिए FileSaver लाइब्रेरी का उपयोग करना होगा:

 downloadFile() { this.http.get( 'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe( (response) => { var mediaType = 'application/pdf'; var blob = new Blob([response._body], {type: mediaType}); var filename = 'test.pdf'; saveAs(blob, filename); }); } 

FileSaver लाइब्रेरी को आपकी HTML फ़ाइल में शामिल किया जाना चाहिए:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script> 

यह प्लंकर देखें: http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

दुर्भाग्य से यह सभी AJAX अनुरोधों के लिए responseType टाइप करेगा। इस संपत्ति के मूल्य को निर्धारित करने में सक्षम होने के लिए, XHRConnection और Http कक्षाओं में करने के लिए अधिक अद्यतन हैं।

संदर्भों के रूप में ये लिंक देखें:

  • Jquery ajax का उपयोग कर पीडीएफ फाइल डाउनलोड करें
  • ज़िप फ़ाइल प्राप्त करें, कोणीय जेएस

संपादित करें

थोड़ी अधिक सोचने के बाद, मुझे लगता है कि आप पदानुक्रमित इंजेक्टर का लाभ उठा सकते हैं और इस प्रदाता को केवल उस घटक के स्तर पर कॉन्फ़िगर कर सकते हैं जो डाउनलोड को निष्पादित करता है:

 @Component({ selector: 'download', template: '<div (click)="downloadFile() ">Download</div>' , providers: [ provide(CustomBrowserXhr, { useClass: CustomBrowserXhr } ] }) export class DownloadComponent { @Input() filename:string; constructor(private http:Http) { } downloadFile() { this.http.get( 'https://mapapi.apispark.net/v1/images/'+this.filename).subscribe( (response) => { var mediaType = 'application/pdf'; var blob = new Blob([response._body], {type: mediaType}); var filename = 'test.pdf'; saveAs(blob, filename); }); } } 

यह ओवरराइड केवल इस घटक के लिए लागू होता है (अपने एप्लिकेशन को बूटस्ट्रैपिंग करते समय प्रदान किए जाने वाले संबंधित को निकालना न भूलें)। डाउनलोड घटक उस तरह इस्तेमाल किया जा सकता है:

 @Component({ selector: 'somecomponent', template: ` <download filename="'Granizo.pdf'"></download> ` , directives: [ DownloadComponent ] }) 

तो यह है कि मैं इसे कैसे काम करने में कामयाब रहा हूं। मेरी स्थिति: मुझे अपने एपीआई समापन बिंदु से एक पीडीएफ डाउनलोड करने की आवश्यकता है, और परिणाम को ब्राउज़र में एक पीडीएफ के रूप में सहेजना होगा।

सभी ब्राउज़रों में फ़ाइल-बचत का समर्थन करने के लिए, मैंने FileSaver.js मॉड्यूल का उपयोग किया।

मैंने एक ऐसा घटक बनाया है जो पैरामीटर के रूप में डाउनलोड करने के लिए फ़ाइल की आईडी लेता है घटक, , इस तरह से कहा जाता है:

 <pdf-downloader no="24234232"></pdf-downloader> 

घटक ही एक्सएचआर का इस्तेमाल किसी फ़ाइल में नम्बर पैरामीटर में दिए गए संख्या के साथ सहेजने / सहेजने के लिए करता है। इस तरह हम इस तथ्य को दरकिनार कर सकते हैं कि Angular2 http मॉड्यूल अभी तक द्विआधारी परिणाम प्रकारों का समर्थन नहीं करता है।

और अब, आगे की हलचल के बिना, घटक कोड:

  import {Component,Input } from 'angular2/core'; import {BrowserXhr} from 'angular2/http'; // Use Filesaver.js to save binary to file // https://github.com/eligrey/FileSaver.js/ let fileSaver = require('filesaver.js'); @Component({ selector: 'pdf-downloader', template: ` <button class="btn btn-secondary-outline btn-sm " (click)="download()"> <span class="fa fa-download" *ngIf="!pending"></span> <span class="fa fa-refresh fa-spin" *ngIf="pending"></span> </button> ` }) export class PdfDownloader { @Input() no: any; public pending:boolean = false; constructor() {} public download() { // Xhr creates new context so we need to create reference to this let self = this; // Status flag used in the template. this.pending = true; // Create the Xhr request object let xhr = new XMLHttpRequest(); let url = `/api/pdf/iticket/${this.no}?lang=en`; xhr.open('GET', url, true); xhr.responseType = 'blob'; // Xhr callback when we get a result back // We are not using arrow function because we need the 'this' context xhr.onreadystatechange = function() { // We use setTimeout to trigger change detection in Zones setTimeout( () => { self.pending = false; }, 0); // If we get an HTTP status OK (200), save the file using fileSaver if(xhr.readyState === 4 && xhr.status === 200) { var blob = new Blob([this.response], {type: 'application/pdf'}); fileSaver.saveAs(blob, 'Report.pdf'); } }; // Start the Ajax request xhr.send(); } } 

मैंने टेम्पलेट में इस्तेमाल किए गए फोंट के लिए फ़ॉन्ट विस्मयकारी का उपयोग किया है I मैं चाहता था कि घटक एक डाउनलोड बटन और एक स्पिनर को प्रदर्शित करता है, जबकि पीडीएफ प्राप्त होता है।

इसके अलावा, नोटिस मैं उपयोग कर सकता था fileSaver.js मॉड्यूल लाने की आवश्यकता है। इसका कारण यह है कि मैं वेबपैक का उपयोग कर रहा हूं ताकि मुझे / आयात की आवश्यकता हो, जैसे मैं चाहता हूं। आपके सिंटैक्स आपके बिल्ड टूल के आधार पर भिन्न हो सकते हैं।

मुझे नहीं लगता कि ये सभी हैक्स आवश्यक हैं। मैंने सिर्फ मानक 2.0 के साथ कोणीय 2.0 में एक त्वरित परीक्षण किया, और यह अपेक्षित रूप में काम किया।

 /* generic download mechanism */ public download(url: string, data: Object = null): Observable<Response> { //if custom headers are required, add them here let headers = new Headers(); //add search parameters, if any let params = new URLSearchParams(); if (data) { for (let key in data) { params.set(key, data[key]); } } //create an instance of requestOptions let requestOptions = new RequestOptions({ headers: headers, search: params }); //any other requestOptions requestOptions.method = RequestMethod.Get; requestOptions.url = url; requestOptions.responseType = ResponseContentType.Blob; //create a generic request object with the above requestOptions let request = new Request(requestOptions); //get the file return this.http.request(request) .catch(err => { /* handle errors */ }); } /* downloads a csv report file generated on the server based on search criteria specified. Save using fileSaver.js. */ downloadSomethingSpecifc(searchCriteria: SearchCriteria): void { download(this.url, searchCriteria) .subscribe( response => { let file = response.blob(); console.log(file.size + " bytes file downloaded. File type: ", file.type); saveAs(file, 'myCSV_Report.csv'); }, error => { /* handle errors */ } ); } 

हैलो , यहां एक काम उदाहरण है। यह पीडीएफ के लिए भी उपयुक्त है! आवेदन / ऑक्टेट-स्ट्रीम – सामान्य प्रकार नियंत्रक:

 public FileResult exportExcelTest() { var contentType = "application/octet-stream"; HttpContext.Response.ContentType = contentType; RealisationsReportExcell reportExcell = new RealisationsReportExcell(); byte[] filedata = reportExcell.RunSample1(); FileContentResult result = new FileContentResult(filedata, contentType) { FileDownloadName = "report.xlsx" }; return result; } 

Angular2:

सर्विस एक्सहोर:

 import { Injectable } from '@angular/core'; import { BrowserXhr } from '@angular/http'; @Injectable() export class CustomBrowserXhr extends BrowserXhr { constructor() { super(); } public build(): any { let xhr = super.build(); xhr.responseType = "blob"; return <any>(xhr); } } 

फ़ाइल-सेवर एनपीएम संकुल "फाइल-सेवर" स्थापित करें: "^ 1.3.3", "@ टाइप / फ़ाइल-सेवर": "0.0.0" और विक्रेता में शामिल है 'आयात फ़ाइल-सेवर';

घटक बीटीएन डाउनलोड।

 import { Component, OnInit, Input } from "@angular/core"; import { Http, ResponseContentType } from '@angular/http'; import { CustomBrowserXhr } from '../services/customBrowserXhr.service'; import * as FileSaver from 'file-saver'; @Component({ selector: 'download-btn', template: '<button type="button" (click)="downloadFile()">Download</button>', providers: [ { provide: CustomBrowserXhr, useClass: CustomBrowserXhr } ] }) export class DownloadComponent { @Input() api: string; constructor(private http: Http) { } public downloadFile() { return this.http.get(this.api, { responseType: ResponseContentType.Blob }) .subscribe( (res: any) => { let blob = res.blob(); let filename = 'report.xlsx'; FileSaver.saveAs(blob, filename); } ); } } 

का उपयोग करते हुए

 <download-btn api="api/realisations/realisationsExcel"></download-btn> 

एपीआई से एक फ़ाइल डाउनलोड करने का सबसे आसान तरीका यह है कि मैं इसके साथ आने में सक्षम था।

 import { Injectable } from '@angular/core'; import { Http, ResponseContentType } from "@angular/http"; import * as FileSaver from 'file-saver'; @Injectable() export class FileDownloadService { constructor(private http: Http) { } downloadFile(api: string, fileName: string) { this.http.get(api, { responseType: ResponseContentType.Blob }) .subscribe((response: any) => { FileSaver.saveAs(response.blob(), fileName); }); } } 

अपने घटक वर्ग से downloadFile(api,fileName) विधि को कॉल करें।

FileSaver प्राप्त करने के लिए अपने टर्मिनल में निम्न आदेश चलाएं

 npm install file-saver --save npm install @types/file-saver --save