通过window.location下载canvas.toDataURL时如何修改文件名？

AI 小北

2026-8-6

修改Canvas生成图片的下载文件名

你当前用window.location.href直接跳转data URL的方式，浏览器没法自定义下载文件名，只能用默认的无后缀"Download"。要指定文件名和后缀，推荐用创建<a>标签并设置download属性的方式，这是浏览器原生支持的标准方案。

针对你要生成JPEG图片的需求，修改后的代码如下：

html2canvas(document.getElementById("rankingTable")).then(function (canvas) {
  // 生成JPEG格式的data URL，第二个参数是图片质量（0-1，1为最高）
  var image = canvas.toDataURL("image/jpeg", 1.0);
  // 创建隐藏的a标签
  var link = document.createElement('a');
  // 设置a标签的href为生成的图片data URL
  link.href = image;
  // 指定下载的文件名（这里可以自定义，比如"排行榜.jpg"）
  link.download = '排行榜.jpg';
  // 将a标签添加到DOM中（部分浏览器需要这一步才能触发点击）
  document.body.appendChild(link);
  // 触发点击事件开始下载
  link.click();
  // 下载完成后移除a标签，清理DOM
  document.body.removeChild(link);
});