如何通过输入框动态设置html2canvas下载文件的文件名

该功能完全可以实现，不需要改动现有html2canvas导出的核心逻辑，只需要在触发下载时动态读取输入框的值替换原有固定文件名即可。

• 点击下载按钮时，先获取id为name的输入框的内容，去除首尾无效空格
• 增加兜底规则：如果输入框内容为空，自动使用默认文件名download.png，避免空文件名导致下载异常
• 自动为输入的文件名拼接.png后缀，无需用户手动填写后缀，降低使用成本
• 将拼接完成的动态文件名传入saveAs方法的第二个参数，替换原有固定值即可

HTML部分 #

<!-- 文件名输入框，原有代码可直接保留 -->
<input id="name" type="text" placeholder="Type here...">
<!-- 下载按钮 -->
<button class="download">导出为PNG</button>
<!-- 需要导出的目标容器，原有内容保持不变 -->
<div id="to_save">
  <!-- 待导出的页面内容 -->
</div>

JavaScript部分 #

$(".download").on("click", function() {
  // 读取输入框内容并去除首尾空格
  const customName = $('#name').val().trim();
  // 生成最终文件名：有输入内容时用自定义名称，否则用默认值
  const saveFileName = customName ? `${customName}.png` : 'download.png';

  html2canvas(document.querySelector("#to_save")).then(canvas => {
    canvas.toBlob(function(blob) {
      // 传入动态生成的文件名完成下载
      window.saveAs(blob, saveFileName);
    });
  });
});

• 可增加文件名特殊字符过滤逻辑，自动替换\ / : * ? " < > |等系统不允许出现在文件名中的字符，避免下载失败
• 如果要求必须自定义文件名，可在读取输入值后增加校验，输入为空时弹出提示并终止后续导出逻辑
• 原有html2canvas、FileSaver（即saveAs方法依赖库）的引入不需要做任何调整，直接复用即可

内容的提问来源于stack exchange，提问作者Cosmochen