为什么这在 ff/chrome 中不起作用?
javascript: document.execCommand('SaveAs','true','http://www.google.com');
(用作书签)
为什么这在 ff/chrome 中不起作用?
javascript: document.execCommand('SaveAs','true','http://www.google.com');
(用作书签)
在 Firefox 中可以通过数据 URI(另请参阅下载数据 url 文件)和可选的下载属性来执行此操作。
有关 HTML5 shim 演示,请参阅http://html5-demos.appspot.com/static/a.download.html。
除了更改标题之外,如何在Firefox中强制另存为对话框?也涵盖了这个主题。
您也可以通过以下 Firefox 测试的演示对其进行测试。
<!DOCTYPE html>
<body>
<script>
var a = document.createElement('a');
//alert(a.download === ''); // If true, this seems to indicate support
a.setAttribute('download', 'testme.png');
a.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAwElEQVQ4jWNgGPRgv7Y2z0lj45STpqbHT5iaxhCt8biBgcJJU9PZJ01MPp80MfkPxZOJN8DEpAFJ4/+TJib/T5mY7CdK8wkTkwJ0zVA8naDmk0ZGPjg0/z9hbGyDV/MZY2ORkyYm77FpPmVispwSp6/e7+DAQtj5pqabsdi8myjNUANmY7H99jEjIxWiDDhuauqCxYDD+7W1eYgy4IyxMetJE5PpyH4/ZWqqTZRmGIAm3fsk2YwOjhkZqZCtmVQAAIOlmIi0XoodAAAAAElFTkSuQmCC';
a.innerHTML = 'testing';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
</script>
以下方法也适用于 URL 以及没有下载属性的 JavaScript 启动的加载(虽然这种方法不允许文件名,但它允许在新选项卡中预览):
<script>
var myText = 'Hello world!',
myHTML = '<b>'+myText+'</b>';
function openFile (textToEncode, contentType, newWindow) {
// For window.btoa (base64) polyfills, see
// https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
var encodedText = window.btoa(textToEncode);
var dataURL = 'data:' + contentType + ';base64,' + encodedText;
if (newWindow) { // Not useful for application/octet-stream type
window.open(dataURL); // To open in a new tab/window
}
else {
window.location = dataURL; // To change the current page
}
}
</script>
<h1>Hello world files:</h1>
<p>Octet stream type to prompts download dialog in Firefox, but with no
default file type or path:</p>
<a href="data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D">
(text example)</a>
<a href="data:application/octet-stream;base64,PGI+SGVsbG8gd29ybGQhPC9iPg==">
(HTML example)</a>
<button onclick="openFile(myHTML, 'application/octet-stream');">
(HTML example, from JavaScript)</button>
<p>Quickly viewable (and manually savable) in browser but no dialog presented:</p>
<a href="data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D">(plain text, same window)</a>
<a href="data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" target="new-tab">
(plain text--in new tab)</a>
<a href="data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E">(HTML, same window)</a>
<button onclick="openFile(myText, 'text/plain');">
(text example, from JavaScript)</button>
<button onclick="openFile(myText, 'text/plain', true);">
(text example, from JavaScript; open in new window)</button>
<button onclick="openFile(myHTML, 'text/html', true);">
(HTML example, from JavaScript; open in new window)</button>
execCommand 在浏览器之间没有完全标准化。事实上, execCommand('SaveAs', ...) 似乎只在 IE 上受支持。强制另存为的推荐方法是使用 content-disposition: 附件标头,如http://www.jtricks.com/bits/content_disposition.html中所述
由于这是 HTTP 标头的一部分,因此您可以在任何文件类型上使用它。如果您使用的是 apache,则可以使用 .htaccess 文件添加标头,如此处所述。例如:
<FilesMatch "\.pdf$">
<IfModule mod_headers.c>
Header set Content-Disposition "attachment"
# for older browsers
Header set Content-Type "application/octet-stream"
</IfModule>
</FilesMatch>
正如微软所说,“没有适用于这种方法的公共标准。”
Firefox 不支持 execCommand。事实上,它似乎仅限于 IE。