javascript codeigniter 中的下载按钮脚本不起作用

Question

我的网页上有一张图片，我已经为用户提供了编辑图片内容和使用 codeigniter 中的 javascript 下载图片的选项。以下是下载按钮代码：

<div id="chumma" class="col-md-12">

 <button id="download" type="submit" onclick="download_image()"  name="button" value="Download" class="btn btn-primary" >Download</button>


</div>


function download_image(){
  var canvas = document.getElementById("imageCanvas");
  image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "<?php echo $val['title']; ?>.png";
  link.href = image;
    link.click();
}

但这不是下载图片，而是重新加载页面，谁能告诉我这里出了什么问题，在此先感谢

Answer 1

尝试将link插入DOM，点击前可能需要触发原生下载

function download_image(){
  var canvas = document.getElementById("imageCanvas");
  image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "<?php echo $val['title']; ?>.png";
  link.href = image;
  document.body.appendChild(link);
  link.click();
  setTimeout(() => link.remove(), 0); // setTimeout just in case
}

如果出现 link 瞬间可见的问题，您可以使用 CSS.

隐藏 link

编辑：没有注意到提交按钮，如果您想在 JavaScript 中执行操作，请不要使用提交按钮，因为那样会将 http 请求发送到服务器（提交表格）。如果您想在 JavaScript 中执行操作，请使用 <button type="button">，它在表单内部也可以使用（不会提交）。

javascript codeigniter 中的下载按钮脚本不起作用

download button script in javascript codeigniter not working

html

javascript

codeigniter

image

download