如何导航到外部 URL 参数？

Question

所以，我一直在尝试重定向 URL 并在新选项卡中打开它，但我无法做到。

我有一个 API，它返回一个以 BLOB 对象形式出现的纯文本，但实际上，它只是一个 URL。我需要在新标签页中打开 URL。

这是我要开始工作的代码：

    this.printingService.getCvUrl(options).subscribe(
      url => {
        const downloadURL = window.URL.createObjectURL(url);
        window.open(downloadURL, '_blank');
      }
    );

它调用了getCvUrl方法，它是这样的：

   getCvUrl(options: { remoteUrl: string, paperHeight?: string, paperWidth?: string }): Observable<any> {
    const user = this.authenticationService.getCurrentUser();
    const PRINT_SERVICE = `/api/users/${user.id}/syncMyCV`;
    const CV_SERVICE = 'https://cv.url/template/ce';

    const formData = new FormData();
    formData.append('remoteURL', CV_SERVICE + options.remoteUrl);
    formData.append('paperHeight', options.paperHeight);
    formData.append('paperWidth', options.paperWidth);

    const token = this.authenticationService.getToken();

    return this.http.post(
      PRINT_SERVICE,
      formData,
      {
        headers: {
          'Anonymous': 'undefined',
          'accept': '*/*',
          'Authorization': token
        },
        responseType: 'blob'
      }
    ).pipe(catchError(err => {
      this.errorService.handleError(err);
      return observableOf(null);
    }));
  }

作为回应，这当前正在为我打开一个新选项卡，内容为 URL 的文本，但不在浏览器的 URL 字段中。

我已经尝试了所有这些方法：

首先我尝试用路由器导航，当然，它没有用，因为我试图打开一个外部 URL.

    this.printingService.getCvUrl(options).subscribe(
      url => this.router.navigate([url])
    );

然后，看了一些题，尝试修改window位置的href属性。也没用

    this.printingService.getCvUrl(options).subscribe(
      url => window.location.href = url
    );

然后，根据另一个答案，我改用window打开方法，它打开了一个新标签，但是给我一个404错误

    this.printingService.getCvUrl(options).subscribe(
      url => window.open(url, '_blank')
    );

查看之后，我意识到我正在尝试将 blob 对象重定向为 URL 字符串，因此需要进行一些转换。然后我尝试使用我在我正在使用的同一服务中创建的方法。

    this.printingService.getCvUrl(options).subscribe(
      url => {
        this.printingService.view(url);
      }
    );

然后调用打印服务中的view()方法，实现如下：

    view(data: ArrayBuffer, filename = 'resume.pdf') {
    if (!!data) {
      const blob = new Blob([data], {type: 'application/pdf'});
      const downloadURL = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadURL;
      link.download = filename;
      link.click();
    }
  }

但问题是这种方法下载了一个pdf，但它甚至不是我想要的，所以我决定从那个方法中获取我需要的东西，并进行改编。然后我得到了上面的当前解决方案，它也不起作用：

    this.printingService.getCvUrl(options).subscribe(
      url => {
        const downloadURL = window.URL.createObjectURL(url);
        window.open(downloadURL, '_blank');
      }
    );

到目前为止，我运行没有想法。有没有人有任何其他我没有尝试过的方法？

使用已接受答案的解决方案：

在 getCvUrl 方法中，我更改了这一行：

responseType: 'blob'

通过这个：

responseType: 'text'

因为来自 API 的答案将始终是 text/plain 响应。最终代码如下所示：

    this.printingService.getCvUrl(options).subscribe(
      url => {
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      }
    );

Answer 1

试试这个包 file-saver

很容易实现。

import { saveAs } from 'file-saver';

 this.http
  .post(
    yourURL
    {
      responseType: 'arraybuffer',
    }
  )
  .subscribe((val: any) => {
    const blob = new Blob([val], { type: 'application/pdf' });
    const url = window.URL.createObjectURL(blob);
    saveAs(blob, 'name.pdf');
  });

Answer 2

我不确定这是否可行，但请尝试将 link 元素添加到 DOM，然后再单击它，然后将其删除。

function openBlob(data: Blob) {
  //Add a link and click it!
  const downloadLink = document.createElement("a");
  downloadLink.href = window.URL.createObjectURL(data);
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

如何导航到外部 URL 参数？

How can I navigate to an external URL parameter?

url

redirect

blob

typescript

angular