BLOB URL 的自定义名称

IT技术 javascript angularjs
2021-02-26 18:23:44

我们有一个 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 新手,希望我的问题听起来不是很幼稚。

预先感谢您的意见。

6个回答

简短的回答,你不能

这是一个指向浏览器内存的地址,它存储了您的 blob,或者在用户通过输入 type=file 上传文件的情况下指向原始文件的指针。

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

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

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

但无论如何,我只会让随机 url,随着越来越多的网络应用程序确实使用这个伟大的 API,你的用户会越来越习惯它。

可以设置文件名,在下面添加** downloadLink.href = ${filename};**
2021-05-15 18:23:44

上面的else条件代码中,在下面插入以下代码:

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();
就像一个魅力,“+1”。
2021-04-17 18:23:44
如果您想下载文件,它可以很好地工作,但如果您需要在新选项卡上打开它,它似乎无济于事。
2021-04-23 18:23:44
简要说明将有助于理解原因。
2021-05-02 18:23:44
以及如何在新标签页中打开而不是下载?
2021-05-05 18:23:44
这是个好主意,你应该更好地解释一下。“下载”属性强制下载文件的名称。
2021-05-16 18:23:44

我一直在寻找相同的内容,实际上您可以为链接添加一个下载属性,这将在 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>

希望这对你也有用。

如何提供 ngIf 和下载属性的值?我在 api 响应中获取二进制格式文件,target='_blank'在 html 中它仍然无法正常工作,我也尝试删除下载属性,还需要什么?
2021-05-02 18:23:44

还有另一种可能的解决方案可以探索,但它有自己的问题。您实际上可以将您的 blob url 存储在浏览器 cookie 存储中,然后从另一个选项卡中检索它,当您创建共享工作程序时,它将连接到同一个工作程序。这里需要注意的是,当您的 cookie 值仍然设置时,您的 blob 可能会消失,因此当一个新的 worker 被初始化时,它会默默地失败。如果您以某种方式测试以查看工作脚本是否成功运行,则可能有办法缓解这种情况,如果没有,请擦除 cookie 并重新创建 blob。然而,似乎没有一种可靠的方法来知道工人是否正在从主线程运行,所以这会很棘手,但我怀疑如果您使用一些延迟/超时并等待来自工人的回声,我怀疑是可行的。

setTimeout在新选项卡中加载 blob 后,您可以简单地添加一个来更改页面标题,如下所示 -

newTab.location.href = URL.createObjectURL(blob); 
setTimeout(function() {
    newTab.document.title = blob.name;
}, 10);
SecurityError: Permission denied to access property "document" on cross-origin object
2021-04-21 18:23:44