Question

我使用PDFKit（无节点）在浏览器中生成PDF，并通过src属性显示iframe或embed标签。生成的blob URL是某种UUID。所以整个页面看起来像：

＆＃xA;＆＃xA;

 ＆lt; embed src =“blob：http：// localhost / eeaabb ...”/＆gt;＆＃xA ;

＆＃xA;＆＃xA;

PDF显示正常，但当我点击Chrome中的“下载”链接时，默认文件名是UUID。在FireFox中，它只是“document.pdf”。

＆＃xA;＆＃xA;

如果这是服务器生成的PDF，我会使用Content-Disposition和/或操作URL，所以它的最后一部分是我想要的名字，但是使用客户端生成的对象似乎是可能的。

＆＃xA;＆＃xA;

我尝试过的事情：

＆＃xA;＆＃xA;

通过元数据设置PDF标题。这有效但不影响文件名。
操作embed标签title属性。似乎没有做任何事情。
更改页面标题。不影响文件。
尝试将某些内容附加到数据网址。只是阻止PDF显示。
通过POST上传PDF，然后通过我可以控制URL的页面下载。可以工作，但生成客户端PDF似乎很疯狂，只需将其上传到服务器。

＆＃xA;＆＃xA;

有没有办法围绕这个，以便我可以控制默认/建议的文件名？

＆＃XA;

Answer 1

有什么方法可以控制这个名字吗？

没有。您无法控制存储在用户本地文件系统中的文件的名称。

您可以将<a>元素与download属性设置为建议的文件名。如果用户选择下载提供的文件，用户可以在下载文件之前或之后随时更改文件名。

window.onload = () => {
  let blob = new Blob(["file"], {
    type: "text/plain"
  });
  let url = URL.createObjectURL(blob);
  let a = document.createElement("a");
  a.href = url;
  a.download = "file.txt";
  document.body.appendChild(a);
  console.log(url);
  a.click();
}

在chrome，Chrome浏览器中，您可以使用requestFileSystem将Blob，File或Directory存储在LocalFileSystem，将文件写入浏览器配置目录，用户操作系统中的其他目录。见

Answer 2

我还没找到chrome的默认插件我有一些适用于Firefox的东西，并且在Chrome中默认为download.pdf，原因有些奇怪......

以

的形式传递dataURI

'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'

Firefox接受FILE_NAME作为您文件的名称，但Chrome不会......

plnkr ，以便在Chrome中显示更好的download.pdf，它不喜欢嵌套的iframe ......

一个只能在FF中使用的片段：

const FILE_NAME = 'myCoolFileName.pdf';
const file_header = ';headers=filename%3D';

fetch('https://dl.dropboxusercontent.com/s/rtktu1zwurgd43q/simplePDF.pdf?dl=0').then(r => r.blob())
.then(blob=>{
  const f = new FileReader();
  f.onload = () => myPdfViewer.src = f.result.replace(';', file_header + encodeURIComponent(FILE_NAME) + ';');
  f.readAsDataURL(blob);
  });

<iframe id="myPdfViewer" width="500" height="500"></iframe>

但请注意，如果它对您来说非常重要，您当然可以不依赖浏览器自己的插件，并使用例如Mozilla's PDF.js来获得扩展控件。

将默认保存设置为使用Blob的<embed />或<iframe>的名称

2 个答案: