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

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

HTML2Canvas

这是我当前的代码，运行良好，正在从按钮的

onclick

事件调用：

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

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

已经有一个类似的问题，尽管答案不起作用，下载的jpg文件总是损坏的：

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

使用

canvas.toDataURL

以图像src的形式获取画布内容

打开一个窗口/弹出窗口

为图像添加

src

---

顺便打个电话

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

但是，除非所有画布图像都是图标大小的，否则您将面临大量

请求URI过大的消息

第二种方法——可能也是可行的方法——是通过ajax将
img
保存在服务器上的一个表中，例如使用img src调用一个脚本来保存它。完成此调用后，您可以调用另一个具有正确头的服务器脚本进行图像下载，包括之前保存的img src。但这是一种更广泛的方法，您可以自己尝试。
这里有一个解决方案，它建立在公认的方法之上，使用jQuery启用下载按钮，而无需服务器端代码


函数下载（url）{
变量a=$（“”）
.attr（“href”，url）
.attr（“下载”、“test.png”）
.附于（“主体”）；
a[0]。单击（）；
a、 删除（）；
}
函数saveCapture（元素）{
html2canvas（元素）。然后（函数（画布）{
下载（canvas.toDataURL（“image/png”）；
})
}
$（'#btnDownload'）。单击（函数（）{
var元素=document.querySelector（“捕获”）；
保存捕获（元素）
})
它会下载什么？画布不是文件。@Juhana-非常正确，尽管我可以利用
toDataURL
像so-
img=canvas.toDataURL（“image/jpeg”）嘿，代码很棒。尽管如此，我已经知道如何在新窗口中打开它。我想看看是否有可能有一个按钮，让他们可以直接下载图像。啊，对了，非常棘手的哈哈。你知道为什么我在我的问题中贴了一个链接的其他脚本不起作用吗？它似乎在
jpg
文件中完美地强制下载，尽管当我尝试打开该文件时，它声明该文件无效…@fzzk，不，我不知道html2canvas，抱歉。但我认为为你自己做一个可能很容易。以纸张大小制作画布并通过DOM运行，将内容复制到画布，使用与屏幕上的度量相同的度量。这并不像听起来那么难。如果是，html2canvas背后的人就是亿万富翁：）
<?
$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);

function download(url){
  var a = $("<a style='display:none' id='js-downloder'>")
  .attr("href", url)
  .attr("download", "test.png")
  .appendTo("body");

  a[0].click();

  a.remove();
}

function saveCapture(element) {
  html2canvas(element).then(function(canvas) {
    download(canvas.toDataURL("image/png"));
  })
}

$('#btnDownload').click(function(){
  var element = document.querySelector("#capture");
  saveCapture(element)
})