能否通过JavaScript触发浏览器的save as（另存为）功能？

可以通过JavaScript实现这个需求，下面提供两种实用方案，分别适配不同浏览器场景：

方案一：兼容大部分浏览器的Blob下载法 #

这种方法通过将当前页面的HTML内容打包为Blob对象，生成临时下载链接来唤起“另存为”对话框，兼容性覆盖绝大多数现代和旧版浏览器。

<button id="savePageBtn">保存当前页面</button>

<script>
document.getElementById('savePageBtn').addEventListener('click', function() {
  // 获取当前页面的完整HTML内容
  const pageContent = document.documentElement.outerHTML;
  // 创建HTML类型的Blob对象
  const htmlBlob = new Blob([pageContent], { type: 'text/html' });
  // 生成临时URL
  const downloadUrl = URL.createObjectURL(htmlBlob);
  
  // 创建临时a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  // 设置默认保存文件名，可自定义
  downloadLink.download = '当前网页.html';
  // 模拟用户点击
  downloadLink.click();
  
  // 释放临时URL资源
  URL.revokeObjectURL(downloadUrl);
});
</script>

方案二：现代浏览器原生API法 #

使用浏览器提供的showSaveFilePicker原生API，能唤起系统原生的保存对话框，体验更贴合系统，但仅支持Chrome 86+、Edge 86+、Firefox 116+等较新版本浏览器。

<button id="modernSaveBtn">保存当前页面</button>

<script>
document.getElementById('modernSaveBtn').addEventListener('click', async function() {
  try {
    const pageContent = document.documentElement.outerHTML;
    // 唤起原生保存对话框，指定建议文件名和文件类型
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: '当前网页.html',
      types: [{
        description: 'HTML网页文件',
        accept: { 'text/html': ['.html'] }
      }]
    });
    
    // 写入页面内容到文件
    const writableStream = await fileHandle.createWritable();
    await writableStream.write(pageContent);
    await writableStream.close();
  } catch (err) {
    // 处理用户取消保存或异常情况
    console.log('保存操作取消或出错:', err);
  }
});
</script>

注意事项 #

• 上述两种方法仅保存页面的HTML文本，外部引用的图片、样式表、脚本等资源不会被打包。如果需要保存包含所有资源的完整页面，JavaScript无法完全模拟浏览器原生“另存为”的资源打包逻辑，这种情况下可以在按钮旁添加提示，引导用户使用快捷键Ctrl+S（Windows）或Command+S（Mac）完成完整保存。
• 浏览器出于安全限制，JS触发的下载必须绑定在用户真实的点击事件上，上述代码均符合此要求，不会被拦截。

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