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

使用canvas.toDataURL将画布内容作为图像src
打开一个窗口/弹出窗口
在弹出窗口中添加<img>
将图像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一起使用。

如果您右键点击弹出窗口中的图片 - ＆gt;保存图像为，保存的图像有效。

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

修改
我知道:(我认为你必须设置HTTP标头强制下载，这只能由服务器完成（如果我错了就纠正我）。我想在服务器上的“代理”就像这个模型，下载.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 - 消息，除非你的所有画布图像都是图标大小。

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

Answer 2

这是一个建立在公认的解决方案之上的解决方案，它无需使用 jQuery 的服务器端代码即可启用下载按钮。

https://codepen.io/nathansouza/pen/OXdJbo

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)
})

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

2 个答案: