Открыть ссылку в JavaScript (Angular2)

Question

Моя проблема проста у меня есть этот вид интерфейса сборки на угловой 2: http://snag.gy/CsVyN.jpg Когда я нажимаю на 1 это открыть всплывающее меню, а затем при нажатии на 2 ее вызова функции, как что:

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

(я пытался много вещей, прежде чем задать эти вопросы) модуль используется NG2-материал: https://justindujardin.github.io/ng2-material/#/components/dialog с помощью кнопки «подтвердить диалог».

URL-адрес var дает мне хороший URL-адрес в консоли: console.log (url); => когда я нажимаю на ссылку в консоли, она загружает файл хорошо :)

С помощью этого кода фактически не запускается загрузка автоматически.

Как я могу это сделать? Благодарю.

Edit 1:

после mooving некоторые вещи: я получил:

Dashboard.components.ts:

downloadFile(url,file) { 

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

DownloadFile называется в ссылке шоу скачать, как раньше.

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

И файл customBrowserXhr.ts:

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:

Моя консоль Журнал выполнения функции (я заменил правильный URL-адрес в коде

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

функция:

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

Но я получил эту ошибку:

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] 

У вас есть представление о том, что является причиной этого? Возможно ли, что модуль маршрутизации? http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview < == по этому plunkr it'sworking отлично

Answer 1

Простого решения будет «getDownloadLink» вернуть промежуточное звено, которое будет перенаправлять пользователь на фактическую ссылку, которую вы хотите.

var url = this._Service.getDownloadLink(name); 
console.log(url); 
window.location = url; 

Обратите внимание, что в фактической ссылке для загрузки с серверной части вам необходимо установить правильные заголовки содержимого.

Answer 2

Подходом было бы загрузить изображение через запрос AJAX, а затем использовать библиотеку FileSaver, чтобы открыть диалоговое окно загрузки.

Вот пример.Для установки типа ответа необходимо расширить класс BrowserXhr.

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

Затем вы можете использовать этот класс, чтобы выполнить запрос, чтобы получить содержание изображения:

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

Этого переопределение (установка типа ответа) будет применима только для этого компонента (не забудьте удалите соответствующую информацию при загрузке приложения), потому что я установил провайдера в атрибут providers компонента. Компонент загрузки может быть использован так:

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

Смотрите этот ответ для получения более подробной информации:

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