javascript - opening hidden iframe for file download on document ready(javascript - 打开隐藏的 iframe 以在文档准备好时下载文件)
问题描述
我正在尝试使用此技巧在文档准备就绪时打开文件下载对话框.同样的技巧对我来说又一次奏效了,但那次 iframe 是在 ajax 调用之后添加的.这是片段:
I’m trying to use this trick to open a file download dialog on document ready. The same trick has worked another time for me, but that time the iframe was added after an ajax call. This is the snippet:
<script type="text/javascript">
$(document).ready(function() {
var url='/my_file_url/';
var _iframe_dl = $('<iframe />')
.attr('src', url)
.hide()
.appendTo('body');
});
</script>
虽然 iframe 在 html 代码中正确打印,但它没有预期的行为:加载页面后没有出现下载文件弹出窗口.有什么帮助吗?
While the iframe is correctly printed in html code, it doesn’t have the expected behaviour: no download file popup appears after loading the page. Any help on why?
推荐答案
效果很好,假设 MIME 是一种将开始下载的类型,例如 application/octet-stream.由于内置 pdf 阅读器,您可能会遇到浏览器正在呈现它并且不提供下载的问题.
It works just fine, assuming that the MIME is of a type that will start a download, for example application/octet-stream. You may be encountering an issue where the browser is rendering it and not offering a download due to an in-built pdf reader.
$(document).ready(function(){
var url='data:application/octet-stream,hello%20world';
var _iframe_dl = $('<iframe />')
.attr('src', url)
.hide()
.appendTo('body');
});
如果客户端在现代浏览器上,另一种解决方案是使用 <a>
并设置 href 和 download,然后模拟点击它.
An alternate solution, if the client is on a modern browser, is to use an <a>
with href and download set, then simulate a click on it.
var a = document.createElement('a'),
ev = document.createEvent("MouseEvents");
a.href = url;
a.download = url.slice(url.lastIndexOf('/')+1);
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
a.dispatchEvent(ev);
这篇关于javascript - 打开隐藏的 iframe 以在文档准备好时下载文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:javascript - 打开隐藏的 iframe 以在文档准备好时下载文件
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 直接将值设置为滑块 2022-01-01