我生成使用PDFKit在浏览器中的PDF(不含节点),并显示它的iframe或通过src属性的嵌入标记。 生成的斑点网址是某种UUID的。 因此,整个页面看起来像:
<embed src="blob:http://localhost/eeaabb..."/>
该PDF显示正常,但是当我点击Chrome浏览器的下载链接,默认的文件名是UUID。 在Firefox中,它仅仅是“document.pdf”。
如果这是一个服务器生成的PDF我会使用内容处置和/或操纵URL所以它的最后一部分是我想要的名字,但是这似乎并不可能与客户端生成的对象。
事情我已经尝试:
- 通过设置在元数据中的PDF称号。 这工作,但不影响文件名。
- 操纵嵌入标记title属性。 似乎没有做任何事情。
- 更改页面标题。 不影响文件。
- 尝试添加一些东西到传输数据的URL。 只是防止PDF无法显示。
- 上传通过POST的PDF,然后通过一个网页,我可以控制的URL下载。 可以工作,但似乎疯了,只生成客户端PDF不得不把它上传到服务器。
有没有解决这个办法,这样我可以控制默认/建议的文件名?
我没有找到,但是,对于Chrome的默认插件。
我已经得到的东西,对于火狐虽然有效,并且将默认为download.pdf
铬,一些奇怪的原因...
通过形式传递dataURI
'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'
火狐接受FILE_NAME为您的文件的名称,但Chrome不...
一个plnkr展现出更好的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的PDF.js了,你会得到一个扩展控制。
有没有解决这个办法,这样我可以控制的名字吗?
不可以,你无法控制储存在用户本地文件系统中的文件的名称。
您可以使用<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(); }
在铬,可以使用铬浏览器requestFileSystem
存储Blob
, File
或Directory
在LocalFileSystem
,其中用户操作系统中写入文件浏览器配置目录或其他目录。 看到
- 如何在文件(用户目录)使用JavaScript编写?
- jQuery的文件上传插件:可以保存资料夹上传的结构?
- 当存储的Blob二进制数据?