javascript - 如何强制下载而不是打开文件？

Question

基本上，我使用的是一个名为 HTML2Canvas

的简单库

这是我当前的代码，运行良好，正在从按钮的 onclick 事件中调用:

function saveForm()
{
    html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            }
        });
}

基本上，它所做的只是截取屏幕截图并将其附加到页面底部。

已经有一个类似的问题，虽然答案没有用，而且下载的总是一个损坏的jpg文件: html2canvas saving as a jpeg without opening in browser

有没有办法在此函数中强制下载而不是将其附加到页面底部？

Answer 1

1. 使用canvas.toDataURL获取 Canvas 内容作为图像 src
2. 打开一个窗口/弹出窗口
3. 添加 <img>到弹出窗口
4. 将图像 src 指定为 src图片

---

function saveForm() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png");
            var open = window.open('','','width=500,height=500')
            open.document.write('<img id="img" style="width="400">');
            open.document.getElementById('img').setAttribute('src', img);
        }
    });
}

测试了onrendered里面的代码, 它确实有效 - 但不能与 html2canvas 一起使用。

如果在弹出的图片上右击->图片另存为，保存的图片有效。

我使用 setAttribute 的原因而不仅仅是 src="..."是如果您将数据 src 指定为字符串，图像就会损坏。

---

编辑
我知道 :( 我认为你必须设置 HTTP header 来强制下载，这只能由服务器完成(如果我错了请纠正我)。我想到服务器上的“代理”就像这个模型，下载.php :

<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>

并调用它

var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);

但是接下来你会面临很多Request-URI Too Large -消息，除非您所有的 Canvas 图像都是图标大小。

第二种方法 - 可能是可行的方法 - 是保存 img通过 ajax 在服务器上的表中，例如使用保存它的 img src 调用脚本。此调用完成后，您可以使用正确的 header 调用另一个服务器脚本以进行图像下载，包括之前保存的 img src。但这是一种更广泛的方法，您可以自己尝试......？