javascript - Document.createElement 下载 PDF 在 IE 中不起作用
问题描述
问题
我的 PDF 下载适用于 Chrome,但不适用于 IE 11/10/9。
在 IE 中,它会提示我一个安全警告,但是在我单击是允许它之后,什么都没有发生。
代码
handleDownload = (reportLoc) => {
var path = reportLoc.item.ReportPath;
$.get("/Api/Apps/GetFileFromServer?filePath=" + path, (response) => {
this.setState({ base64EncodedPDF: response });
}).then(() => {
let a = document.createElement("a");
a.href = "data:application/octet-stream;base64," + this.state.base64EncodedPDF;
a.download = path.substring(path.lastIndexOf("\\") + 1);
a.click();
});
}
使其在 Chrome 和 IE 中都能正常工作的解决方案?
解决方案
在查看了以下 2 个参考资料后,我设法解决了这个问题:
https://blog.jayway.com/2017/07/13/open-pdf-downloaded-api-javascript/
在 JavaScript 中从 base64 字符串创建 Blob
我现在的代码:
handleDownload = (reportLoc) => {
var path = reportLoc.item.ReportPath;
$.get("/Api/Apps/GetFileFromServer?filePath=" + path, (response) => {
this.setState({ base64EncodedPDF: response });
}).then(() => {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var byteCharacters = atob(this.state.base64EncodedPDF);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: "application/octet-stream" });
window.navigator.msSaveOrOpenBlob(blob, path.substring(path.lastIndexOf("\\") + 1));
return;
}
let a = document.createElement("a");
a.href = "data:application/octet-stream;base64," + this.state.base64EncodedPDF;
a.download = path.substring(path.lastIndexOf("\\") + 1);
a.click();
});
}
推荐阅读
- powershell - WIX 安装程序不允许在 msiexec 命令行中使用 targetdir
- html - 如何在 flex 布局中处理表格的滚动?
- signalr - Azure signalR 服务处于无服务器模式,不允许服务器连接
- r - R:在某些坐标处从栅格更改值
- asp.net - 发生 IIS Web 服务错误 - 可能与 CORS 相关
- airflow - 气流在任务之间传输数据,而不在阶段之间存储数据
- python - Python 等价于 R's ... 用于匹配函数参数
- react-native - 测试无法在 React Native 上运行
- php - $_SESSION 在点击提交后显示不反映更改
- docker - Docker 挂起并重新启动后端口卡住