Öffnen Download Link in JavaScript (Angular2)

Question

Mein Problem ist einfach ich diese Art der Schnittstelle Build durch Winkel 2: http://snag.gy/CsVyN.jpg Wenn ich auf 1 klicken Sie, um das Popup zu öffnen und dann, wenn Sie auf 2 klicken nennt es eine Funktion wie dass:

showDownloadLink(ev, name) { 
    let config = new MdDialogConfig() 
     .textContent('<a href="http://www.google.fr">lol</a>') 
     .clickOutsideToClose(false) 
     .title('Would you like to delete your debt?') 
     .ariaLabel('Lucky day') 
     .ok('Please do it!') 
     .cancel('Sounds like a scam') 
     .targetEvent(ev); 
    this.dialog.open(MdDialogBasic, this.element, config) 
     .then((ref:MdDialogRef) => { 
      ref.whenClosed.then((result) => { 
       if (result) { 
        var url = this._Service.getDownloadLink(name); 
        console.log(url); 
        //window.open(url,'Download'); 
        //this.downloadURI(url); 
       } 
       else { 
        this.status = 'You decided to keep your debt.'; 
       } 
      }) 
     }); 
} 

downloadURI(uri) { 
    var link = document.createElement("a"); 
    link.href = uri; 
    link.click(); 
} 

(ich habe versucht, vor dem viele Dinge auf diese Fragen stellen) Das Modul ist NG2-Material: https://justindujardin.github.io/ng2-material/#/components/dialog mit dem "bestätigen Dialog" -Taste.

Die URL var geben Sie mir eine gute URL in der Konsole: console.log (url); => Wenn ich in der Konsole auf den Link Show klicken Sie die Datei auch herunterladen :)

Mit diesem Code es nicht tatsächlich automatisch den Download starten.

Wie kann ich das tun? Vielen Dank.

Edit 1:

nach mooving einige Dinge: Ich habe:

Dashboard.components.ts:

downloadFile(url,file) { 

    this._Service.getDownloadFile(url,file); 
} 

das Downloadfile wird in der Show Download-Link wie vor genannt.

In dem _service.ts:

import {Injectable} from "angular2/core"; 
import {S3Object} from "./s3object"; 
import {Observable} from "rxjs/Observable"; 
import {Http, Headers, Response} from "angular2/http"; 
import "rxjs/Rx"; 
import {CredService} from "./cred.service"; 
//mettre les parenthèses !! 
@Injectable() 
export class Service { 

private serviceUrl = 'url'; 
private token; 
private headers = new Headers(); 
private credS; 


constructor(private http:Http, private cred:CredService) { 
    this.credS = cred; 
    this.token = cred.getToken(); 
    this.headers.append('Authorization', 'bearer ' + this.token); 
    this.headers.append('Content-Type', 'application/json'); 
} 


getDownloadLink(path:string){ 
    var opUrl = 'download.json?objectKey='+path; 
    var urlRes = ""; 
    this.http.get(this.serviceUrl + opUrl,{ 
      headers: this.headers 
     }) 
     .map(res => res.text()) 
     .subscribe(
      data => urlRes = data, 
      err => console.log(err), 
      () => console.log(urlRes) 
     ); 

    //console.log(urlRes); 
    return urlRes; 
} 
getDownloadFile(url:string, file:string) { 
    this.http.get(url).subscribe(
     (response) => { 
      var blob = new Blob([response._body], {type: "application/text"}); 
      var filename = file; 
      saveAs(blob, filename); 
     }); 
} 
} 

Und eine customBrowserXhr.ts Datei:

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"; 
     console.log("it's cool bro ! "); 
     return <any>(xhr); 
    } 
} 

Edit 2:

Meine Konsole Protokoll der Ausführung der Funktion (i ersetzt die korrekte URL von URL im Code

test url ddl before : "URL/Desert.jpg?serieofparams" 
test name ddl before : Desert.jpg 

die Funktion:

downloadFile(url,file) { 
     console.log('test url ddl before : ' + url); 
     console.log('test name ddl before : ' + file); 
     this.http.get(url).subscribe(
      (response) => { 
       var blob = new Blob([response._body], {type: "image/jpeg"}); 
       var filename = file; 
       saveAs(blob, filename); 
      }); 
    } 

Aber ich habe diesen Fehler:

Failed to load resource: the server responded with a status of 404 (Introuvable) http://localhost:8080/context/%22URL/Desert.jpg?serieofparams%22 
angular2.dev.js:23740 EXCEPTION: [object Object] 

Haben Sie eine Vorstellung davon, was das verursacht? ist es möglich, dass das Routing-Modul das tun? http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview < == auf diesem plunkr it'sworking perfekt

Answer 1

einfache Lösung wäre „getDownloadLink“ seine Zwischenverbindung zurückzukehren, die Benutzer zu tatsächlichem Link umleiten, die Sie wollen.

Beachten Sie, dass in der tatsächlichen Download-Link, von Server-Seite müssen Sie richtige Content Disposition Headern festlegen.

Answer 2

wäre ein Ansatz sein, das Bild durch eine AJAX-Anforderung zu laden und dann die FileSaver Bibliothek nutzen, um den Download-Dialog zu öffnen.

Hier ist ein Beispiel.Sie müssen die Klasse BrowserXhr erweitern, um den Antworttyp festzulegen.

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    constructor() {} 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

Dann können Sie diese Klasse nutzen, um die Anfrage auszuführen, um den Bildinhalt zu erhalten:

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

Diese Überschreibung (die Antworttyp eingestellt werden) würde gelten nur für diese Komponente (vergessen Sie nicht, Entfernen Sie die entsprechende Angabe beim Bootstrapping Ihrer Anwendung), da ich den Provider im Attribut providers der Komponente festgelegt habe. Die Download-Komponente könnte so verwendet werden:

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

diese Antwort Siehe für weitere Informationen:

• Angular 2 download PDF from API and Display it in View