如何在不点击的情况下创建<a download>？

Question

我有以下 jQuery 和 HTML 代码，并且运行良好：

<a id="bmpFormat">.BMP</a>

<script>
    var exportBMPElement = document.getElementById('bmpFormat');

    exportBMPElement.addEventListener('click', function(e) {
      map.once('postcompose', function(event) {
        var canvas = event.context.canvas;
        exportBMPElement.download = 'mapa.bmp'
        exportBMPElement.href = canvas.toDataURL('image/bmp');
      });
    }
</script>

但是现在，我想调用所有这些而不用“点击”，只是调用一个函数。我试过但没有成功...... 我想这样做是因为我需要在验证表单之后调用此代码。顺便说一句，我的表单在模态 div.

内

事实上，我试过做这个简单的例子，但它不起作用：

<div class="modal>  
  <form id="exportMapForm" action="javascript:doExportMap()" role="form">
  </form>
</div>

function doExportMap() {
    var a = document.createElement('a');
    a.download = 'tux.png';
    a.href = 'http://mail.rsgc.on.ca/~ldevir/ICS3U/Chapter4/Images/tux.png';
    a.click();
}

我知道我需要在这里创建一个新元素才能达到目标。

Answer 1

您的 a 元素还不是 DOM（文档对象模型）的一部分，因此 a.click() 不会 "do" 太多。在 doExportMap() 函数中，就在 a.click(); 位之后，尝试以下操作：

document.getElementById("exportMapForm").appendChild(a);

现在它是 DOM 的一部分，并且会按预期工作。它现在在你的 "exportMapForm" 中，但你可以将它附加到任何你喜欢的地方 ;)

Answer 2

将锚点附加到 DOM 似乎可行：

function doExportMap() {
    var a = document.createElement('a');
    a.download = 'tux.png';
    a.href = 'http://mail.rsgc.on.ca/~ldevir/ICS3U/Chapter4/Images/tux.png';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Answer 3

没用，

你只需要在js中执行this

document.location = 'http://mail.rsgc.on.ca/~ldevir/ICS3U/Chapter4/Images/tux.png'

如何在不点击的情况下创建<a download>？

How to create <a download> without click?

javascript

jquery

html

openlayers

openlayers-3