使用JS函数下载div的HTML内容仅复制部分，求问题原因及解决方法

• 编码HTML内容，修复URI格式问题
  直接拼接未编码的HTML到data URI中，空格、&、<等特殊字符会破坏URI结构，导致浏览器截断内容。使用encodeURIComponent()对完整HTML内容编码即可解决：

  function download() {
    const htmlContent = '<html><body>' + $('#exportthis').html() + '</body></html>';
    const encodedContent = encodeURIComponent(htmlContent);
    $('a')
      .attr({
        download: 'export.html',
        href: 'data:text/html,' + encodedContent
      })[0].click();
  }
  

• 改用Blob对象突破data URI长度限制
  部分浏览器对data URI的长度有上限（旧版Chrome约2MB），内容过长时会被自动截断。Blob对象无此限制，更适合导出大体积HTML：

  function download() {
    const htmlContent = '<html><body>' + $('#exportthis').html() + '</body></html>';
    const blob = new Blob([htmlContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    $('a')
      .attr({
        download: 'export.html',
        href: url
      })[0].click();
    // 延迟释放URL资源，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(url), 100);
  }
  

• 检查目标元素的HTML完整性
  如果#exportthis内部存在未闭合的HTML标签（如未闭合的<div>、<p>），拼接后的HTML结构异常，可能导致浏览器解析时截断内容。可以在控制台执行console.log($('#exportthis').html())，检查输出的HTML是否完整、标签是否全部闭合。

• 添加剪贴板复制功能（可选）
  除了导出文件，也可以直接将HTML复制到剪贴板，方便粘贴到邮件客户端：

  function copyToClipboard() {
    const htmlContent = '<html><body>' + $('#exportthis').html() + '</body></html>';
    navigator.clipboard.writeText(htmlContent)
      .then(() => alert('HTML内容已复制到剪贴板'))
      .catch(err => console.error('复制失败:', err));
  }
  

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