Question

我当前正在从服务器中检索文件，该服务器在响应头中设置了Content-Disposition: inline。如果支持，它将在浏览器中预览文件；如果不支持预览，则下载文件。该文件将在新标签页中打开，您可以从下面的代码中看到。

downloadDocument(id: string) {
  const documentWindow = window.open('', '_blank');

  if (documentWindow) {
    documentWindow.opener = null;
  }

  let endpoint = Endpoints.getId(Endpoints.Document, id);
  this.genericService.getAll < DocumentClaim > (endpoint).subscribe(
    response => {
      const claim = response.claim;
      endpoint = `${endpoint}/c?=${claim}`;
      if (documentWindow) {
        documentWindow.location.href = endpoint;
      }
    }
  );
}

如果支持预览，我希望能够在新选项卡中打开文件。如果浏览器无法预览文件，我想在当前选项卡中下载文件。或者至少我希望能够在下载开始后关闭新选项卡。我还没有找到实现这一目标的方法。

是否有任何方法可以检查浏览器可以预览的MIME类型？我对window.navigator.mimeTypes有所了解，但这似乎并不能为我提供所有可以预览的mime类型。我在此列表中找不到任何图像模仿类型，但图像是在Chrome中预览的。

Answer 1

这就是我最终得到的。我等到文件的url准备好后再打开文件。由于我们必须等待往返行程才能打开新窗口，因此该窗口将首次被阻止。如果该窗口被阻止，我会向用户显示一些消息，告诉他们停用该站点的弹出窗口阻止程序。

downloadDocument(id: string) {
  let endpoint = Endpoints.getId(Endpoints.Document, id);
  this.genericService.getAll<DocumentClaim>(endpoint).subscribe(
    response => {
      const claim = response.claim;
      endpoint = `${endpoint}/c?=${claim}`;
      const documentWindow = window.open(endpoint, '_blank');
      if (documentWindow) {
        documentWindow.opener = null;
      } else {
        // show some info to user to turn off popup blocker for the site
      }
    }
  );
}

浏览器mimetype预览支持

1 个答案: