图像地图上的onclick JS事件？

Question

我已经在 stackoverflow 和网络上寻找了几个小时的答案。但是我尝试的所有答案都对我不起作用。

基本上，我想在图像地图上放置一个 onclick 事件。该事件是一个 java 脚本函数。当用户点击一个区域元素时，它会将编辑器上的文本下载为 word 文件。

为了说明我要解释的内容，这里是 https://jsfiddle.net/00bk1zad/ 和我制作的代码。我不知道我应该编辑什么才能让它工作。

谢谢！

代码：

function txtdownload() {
  console.log('called')
  var textToSave = document.getElementById("editor").value;
  var textToSaveAsBlob = new Blob([textToSave], {
    type: "application/msword"
  });
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  var fileNameToSaveAs = "YouKtub.doc";
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
}

<div align=center>
  <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea>
</div>

<div>
  <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0>
</div>
<map name=map1Map> <area coords="268,46,47,113" href="#" onclick="txtdownload()"> </map>

Answer 1

我删除了downloadLink.onclick = destroyClickedElement; 并在末尾添加了document.body.removeChild(downloadLink);。因此，当您按下按钮并下载文件时，隐藏的链接将被破坏。 （在 Chrome 中工作）

更新：（现在可以在本地的 Firefox 或 JSFiddle 上使用 - stackoverflow 代码n-p 仍然不起作用）在区域标签中，我删除了 onclick="txtdownload()" 并将 href="#" 更改为 href="javascript:txtdownload()"。 JSFiddle：https://jsfiddle.net/00bk1zad/2/

将来，您可以使用 FileSaver.js。使用示例检查此链接：https://github.com/eligrey/FileSaver.js/

function txtdownload() {
	var textToSave = document.getElementById("editor").value;
  var textToSaveAsBlob = new Blob(
    [textToSave],
    {type:"application/msword"});
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  var fileNameToSaveAs = "YouKtub.doc";
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
 }

<div align=center>
  <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea>
</div>

<div>
  <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0>
</div>

<map name=map1Map>
  <area coords="268,46,47,113" href="javascript:txtdownload()">
</map>