图片地图上的onclick JS事件？

Question

在这里，我一直在Stackoverflow和Web上寻找答案的时间。 但是，我尝试的所有答案均不适用于我。

基本上，我想在图像地图上放置一个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 codenippet仍然不起作用）在区域标记中，我删除了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>