Question

我们有一个Angular应用程序，它获取一些输入参数并将它们发送到后端进行处理。处理结果是我们想要在新标签页中打开的pdf文件。

执行此操作的代码与以下内容类似：

myService.getDocument(document)
  .then(function(response) {
    if (response.error) {
      // Error handling goes here
    } else {
      var file = new BLob([response.data), {type: 'application/pdf'});
      var fileURL = URL.createObjectURL(file);
      $window.open(fileURL, '_blank_');
    }
  });

一切正常但浏览器中的URL显示了一些随机生成的字符串，如下所示：

blob:http://localhost:3000/85cad96e-e44e-a1f9-db97a96ed3fe

显然这对最终用户来说看起来不太好，我们更愿意展示对用户有意义的东西，如下所示：

blob:ftp://localhost:3000/my_document_name_or_whatever

我是JS的新手，是Angular的新手，是HTML的新手，希望我的问题听起来不太天真。

提前感谢您的意见。

Answer 1

简短回答，你不能。

这是一个指向浏览器内存的地址，它存储了您的blob，或者指向用户通过input type = file上传文件时指向原始文件的指针。

这是某种设计方式。您可以从同一个Blob创建多个这些blobURL。如果他们使用文件名作为URI，你就不能。

理论上，您应该可以动态创建一个重定向到BlobURI的页面，并且可以将此重定向页面命名为。但这只是理论，我从未尝试过这样做。

可以在this plunker中看到粗略的概念证明，显然，您需要动态生成 blobRename.html ，并将其名称更改为您想要的名称，并强制它的内容标题，以便浏览器认为它是一个HTML页面，如果你想摆脱.html。另请注意，它似乎不适用于需要浏览器插件才能触发的pdf文件，但是通过更多工作，可能可能会破解某些内容。

但是无论如何，我只是放弃随机网址，随着越来越多的网络应用使用这个优秀的API，您的用户会越来越习惯。

Answer 2

我一直在寻找相同的东西，实际上，您可以为链接添加下载属性，这将在Chrome上实现成功，到目前为止，我还没有在IE中尝试过

。

<a href="urlBlobData" download="fileTest.csv">Your file</a>

这是Angular 5的示例

<a #link *ngIf="urlBlobData" [href]="urlData" target="_blank" rel="noopener" download="fileTest.csv">Your file</a>

希望对您也有用。

Answer 3

在上面的 else 标准代码中，在下面插入以下代码：

db.products.aggregate([
  {
    $match: {
      id: 1
    }
  },
  {
    $lookup: {
      from: "productfeatures",
      localField: "id",
      foreignField: "productId",
      as: "productfeatures"
    }
  }
])

Answer 4

您可以简单地添加一个setTimeout来在将Blob加载到新标签后更改页面标题，如下所示-

newTab.location.href = URL.createObjectURL(blob); 
setTimeout(function() {
    newTab.document.title = blob.name;
}, 10);

Answer 5

取自How to set a file name using window.open

承认这是下载文件，但未在另一个选项卡中打开。

var downloadLink = document.createElement("a");
downloadLink.href = myBlob;
downloadLink.download = "myFile.pdf";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

Answer 6

您可以通过添加以下内容来添加/传递文件名

//import and inject Renderer2
import { Renderer2 } from '@angular/core';

let downloadLink = this.renderer.createElement('a');

//this converts binary data to a pdf
downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));

//you can pass filename here
   downloadLink.setAttribute('download', filename); 
   document.body.appendChild(downloadLink);
   downloadLink.click();

BLOB URL的自定义名称

6 个答案: