无法下载 chrome 浏览器中显示的 base64 编码的 pdf
[英]Cannot download base64 encoded pdf displayed in chrome browser
问题描述
I'm displaying base64 encoded files within the built-in chrome viewer.
我在内置的 chrome 查看器中显示 base64 编码的文件。 No matter if it is a jpg or PDF I'm unable to download it via button or right click.无论是 jpg 还是 PDF，我都无法通过按钮或右键单击来下载它。 All other functionality such as rotate and print works however.. The tab title displayed is just a 'Loading' with a spinner as well.但是，所有其他功能（例如旋转和打印）都可以使用。显示的选项卡标题也只是带有微调器的“正在加载”。 I am able to download it in firefox just fine.我可以在 firefox 中很好地下载它。
let fileDisplayUrl = '<iframe src="' + 'data:' + mimeType + ';base64,' + base64Contents + '"frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"></iframe>';
let win = window.open();
win.document.write(fileDisplayUrl);
I'm thinking it's due to the way I'm displaying it but I haven't had lucks with other ways yet.我认为这是由于我展示它的方式所致，但我还没有通过其他方式获得成功。
Edit: Tried these as object and img tags and same issue on those.编辑：将这些作为 object 和 img 标签进行了尝试，并且在这些标签上出现了同样的问题。
1 个解决方案
解决方案1
1 已采纳 2019-12-02 12:37:10
Your actual problem is more like that you can not download content supplied via a data: -URI from a new window.您的实际问题更像是您无法从新窗口下载通过data: -URI。 Side note: the spinner can be stopped via close() -ing the document, but it does not affect the inoperational "Save as".旁注：微调器可以通过close() -ing 文档停止，但它不会影响不可操作的“另存为”。
Two workarounds I found:我发现了两个解决方法：
- Open data in the current window (the "iframe" button does that, then the document can be downloaded via right-clicking, though its name defaults to "download.pdf" in Chrome).在当前窗口中打开数据（“iframe”按钮执行此操作，然后可以通过右键单击下载文档，尽管其名称在 Chrome 中默认为“download.pdf”）。 It may be an option with short documents / small images短文档/小图像可能是一个选项
- It is possible to provide an explicit button for downloading, and in this case a filename can be supplied too.可以提供一个明确的下载按钮，在这种情况下也可以提供一个文件名。 "window(tab)" button does that in the example. “窗口（选项卡）”按钮在示例中执行此操作。 While generally it does not look nice that the exact same encoded data is moved around twice, it happens locally in the browser after all虽然通常将完全相同的编码数据移动两次看起来不太好，但毕竟它发生在浏览器本地
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
let pdf="JVBERi0xLjIgCjkgMCBvYmoKPDwKPj4Kc3RyZWFtCkJULyA5IFRmKFRlc3QpJyBFVAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCA1IDAgUgovQ29udGVudHMgOSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0tpZHMgWzQgMCBSIF0KL0NvdW50IDEKL1R5cGUgL1BhZ2VzCi9NZWRpYUJveCBbIDAgMCA5OSA5IF0KPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1BhZ2VzIDUgMCBSCi9UeXBlIC9DYXRhbG9nCj4+CmVuZG9iagp0cmFpbGVyCjw8Ci9Sb290IDMgMCBSCj4+CiUlRU9G";
function doFrame(){
let frm=document.createElement("iframe");
frm.style="border-color:black";
frm.src="data:application/pdf;base64,"+pdf;
document.body.appendChild(frm);
}
function doWindow(){
let wnd=open("",Date.now());
let doc=wnd.document.open();
doc.write("<a href='data:application/pdf;base64,"+pdf+"' download='small.pdf'>Download</a><br>");
doc.write("Object<br><object type='application/pdf' data='data:application/pdf;base64,"+pdf+"'></object><br>");
doc.write("Embed<br><embed type='application/pdf' src='data:application/pdf;base64,"+pdf+"'><br>");
doc.write("IFrame<br><iframe src='data:application/pdf;base64,"+pdf+"'/>");
doc.close();
}
</script>
</head>
<body>
<button onclick="doWindow()">window(tab)</button><br>
<button onclick="doFrame()">iframe</button><br>
</body>
</html>
It's not a runnable snippet as the security sandbox here (on StackOverflow) blocks both kind of attempts.它不是可运行的代码片段，因为此处（在 StackOverflow 上）的安全沙箱会阻止这两种尝试。
The "window(tab)" variant opens the pdf as object , embed and iframe too, I can confirm that right-click+"Save as" in Chrome does not do anything on them. “window(tab)”变体也将 pdf 作为object 、 embed和iframe打开，我可以确认 Chrome 中的右键单击+“另存为”不会对它们执行任何操作。 Download button works (also, in Chrome at least).下载按钮有效（同样，至少在 Chrome 中）。
解决方案2
-2 2020-03-05 01:59:23
I'm displaying base64 encoded files within the built-in chrome viewer.我在内置的 chrome 查看器中显示 base64 编码的文件。 No matter if it is a jpg or PDF I'm unable to download it via button or right click.无论是 jpg 还是 PDF，我都无法通过按钮或右键单击下载它。 All other functionality such as rotate and print works however.. The tab title displayed is just a 'Loading' with a spinner as well.但是，所有其他功能（例如旋转和打印）都可以工作。显示的选项卡标题也只是带有微调器的“正在加载”。 I am able to download it in firefox just fine.我可以在firefox中下载它就好了。
let fileDisplayUrl = '<iframe src="' + 'data:' + mimeType + ';base64,' + base64Contents + '"frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"></iframe>';
let win = window.open();
win.document.write(fileDisplayUrl);
I'm thinking it's due to the way I'm displaying it but I haven't had lucks with other ways yet.我认为这是由于我展示它的方式，但我还没有其他方式的运气。
Edit: Tried these as object and img tags and same issue on those.编辑：尝试将这些作为对象和 img 标签以及相同的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.