BLOB URL的自定义名称

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的页面,并且可以将此重定向页面命名为.但这只是理论,我从未尝试过这样做.

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

但无论如何,我只是让随机网址,你的用户将越来越习惯它,因为越来越多的网络应用程序确实使用这个伟大的API.

Answer 2

在上面的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();