Javascript BLOB URL的自定义名称

我们有一个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，希望我的问题听起来不太幼稚

---

提前感谢您的投入。

简短回答，您不能

这是一个指向浏览器内存的地址，它存储了blob，或者是一个指向原始文件的指针，如果用户通过输入类型=文件上传了文件

这是出于某种设计。可以从同一Blob创建多个这样的BLOBURL。如果他们使用一个文件名作为URI，你不能

从理论上讲，您应该可以动态创建一个重定向到BlobURI的页面，并且您可以将这个重定向页面命名为which。但这只是理论，我从来没有尝试过自己去做

很明显，您需要动态生成blobRename.html，并将其名称更改为您想要的名称，同时强制其内容标题，以便浏览器认为它是一个html页面，如果您想要摆脱

.html

。 还要注意的是，它似乎不适用于pdf文件，而pdf文件需要浏览器插件才能触发，但如果再多做一些工作，就有可能破解一些东西

---

但无论如何，我会让随机url，你的用户会越来越习惯它，因为越来越多的web应用使用这个伟大的API。

我也在寻找相同的，实际上你可以为链接添加下载属性，这会让Chrome上的把戏变得更为有趣，我到目前为止还没有在IE上尝试过

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

这是一个角度为5的例子

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

---

希望这也适用于您。

在上面的条件代码中，在下面插入以下代码：

var file = new BLob([response.data), {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);

// create <a> tag dinamically
var fileLink = document.createElement('a');
fileLink.href = fileURL;

// it forces the name of the downloaded file
fileLink.download = 'pdf_name';

// triggers the click event
fileLink.click();

var file=newblob（[response.data），{type:'application/pdf'}）；
var fileURL=URL.createObjectURL（文件）；
//动态创建标签
var fileLink=document.createElement（'a'）；
fileLink.href=fileURL；
//它强制下载文件的名称
fileLink.download='pdf_name'；
//触发单击事件
fileLink.click（）；

您只需添加一个

setTimeout

即可在blob加载到新选项卡后更改页面标题，如下所示-

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

取自

已授权此操作正在下载未在其他选项卡中打开的文件

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

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

---

您可以通过在下面添加来添加/传递文件名

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

---

简单的解释有助于理解原因。这是一个好主意，您应该更好地解释它。“下载”属性强制输入下载文件的名称。如果您想下载文件，它可以很好地工作，但如果您需要在新选项卡上打开它，它似乎没有帮助。它就像一个符咒，“+1”如何在新选项卡中打开而不是下载？

SecurityError:访问属性“document”的权限被拒绝在跨源对象上

如何提供ngIf和下载属性值？我在一个api响应中获得二进制格式文件，

target=''u blank'

在html中仍然不起作用，我也尝试删除下载属性，还需要什么？您可以设置文件名，添加到下面**downloadLink.href=

${filename}

；**只是好奇，为什么这个答案会被评为负面评价？这对我来说很有效，因为我花了整整两天的时间尝试了很多不同的事情。这可能对和我面临相同情况的人很有帮助。什么是downloadLink，它与最初的问题有什么关系？