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>

但现在，我想打电话给所有这些，不要做＆＃34;点击＆＃34;，只是调用一个函数。我试过这样做但没有成功...... 我想这样做，因为我需要在验证表单后调用此代码。顺便说一句，我的表格在模态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()不会“做”太多。在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中执行

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

如何创建<a download=""> without click?</a>

3 个答案: