如何下载修改innerHTML后的页面文件？落地页生成器开发

要实现修改DOM后下载完整页面，核心是获取当前页面的完整HTML内容，通过Blob生成可下载的文件。以下是适配你现有代码的实现方式：

步骤1：添加下载按钮 #

在页面合适位置（比如.example区块下方）添加触发下载的按钮：

<div class="example">
    image select
    <div id="img-example">
    </div>
</div>
<!-- 新增下载按钮 -->
<button onclick="downloadPage()" class="btn btn-success btn-lg">下载修改后的落地页</button>

步骤2：添加下载函数 #

在你的<script>标签中新增下载逻辑：

function substituir01(){
    document.getElementById('img-example').innerHTML = "<img src=\"https://t3.ftcdn.net/jpg/05/23/38/92/360_F_523389242_J7wqy8fPTHseIDh2tALZEk3qQGhh6LKc.jpg\" width=\"500px\">";
}
function substituir02(){
    document.getElementById('img-example').innerHTML = "<img src=\"https://gomake.com.br/wp-content/uploads/2019/06/logo_ads-900x450.jpg\" width=\"500px\">";
}

// 新增下载函数
function downloadPage() {
    // 获取当前页面的完整HTML（包含所有DOM修改）
    const fullHtml = document.documentElement.outerHTML;
    // 创建HTML格式的Blob对象
    const blob = new Blob([fullHtml], { type: 'text/html;charset=utf-8' });
    // 生成临时下载链接
    const downloadUrl = URL.createObjectURL(blob);
    // 创建a标签触发下载
    const link = document.createElement('a');
    link.href = downloadUrl;
    // 设置下载文件名
    link.download = 'custom-landing-page.html';
    // 触发点击事件
    link.click();
    // 释放临时URL资源
    URL.revokeObjectURL(downloadUrl);
}

完整修改后的代码 #

<body>
    

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Select Image</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">

        <ul id="tipo">
            
            <li>
                <div class="seila">
                    <img  id="banner01" onclick="substituir01()" src="https://t3.ftcdn.net/jpg/05/23/38/92/360_F_523389242_J7wqy8fPTHseIDh2tALZEk3qQGhh6LKc.jpg" width="100px" height="100px">
                </div>
            </li>

            <li>
                <div class="seila">
                    <img  class="banner02" onclick="substituir02()"  src="https://gomake.com.br/wp-content/uploads/2019/06/logo_ads-900x450.jpg" width="100px" height="100px">
                </div>
            </li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div class="example">
    image select
    <div id="img-example">
    </div>
</div>
<!-- 新增下载按钮 -->
<button onclick="downloadPage()" class="btn btn-success btn-lg">下载修改后的落地页</button>

<script>
    this.$(".btnCustom").click(function() {
        var value = $(this).attr('id');
          $("#myModal #selection option[value="+value+"]").attr('selected', 'selected');
});

    function substituir01(){
        document.getElementById('img-example').innerHTML = "<img src=\"https://t3.ftcdn.net/jpg/05/23/38/92/360_F_523389242_J7wqy8fPTHseIDh2tALZEk3qQGhh6LKc.jpg\" width=\"500px\">";
    }
    function substituir02(){
        document.getElementById('img-example').innerHTML = "<img src=\"https://gomake.com.br/wp-content/uploads/2019/06/logo_ads-900x450.jpg\" width=\"500px\">";
    }

    // 新增下载函数
    function downloadPage() {
        const fullHtml = document.documentElement.outerHTML;
        const blob = new Blob([fullHtml], { type: 'text/html;charset=utf-8' });
        const downloadUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = 'custom-landing-page.html';
        link.click();
        URL.revokeObjectURL(downloadUrl);
    }

</script>


</body>

关键说明 #

• document.documentElement.outerHTML：获取整个HTML文档的完整代码，包含<head>（如果有）和<body>中所有修改后的DOM内容，确保下载的页面结构和样式完整。
• Blob对象：将HTML字符串转换为浏览器可识别的文件流，指定text/html类型保证文件能被正确识别为HTML页面。
• 临时URL：通过URL.createObjectURL生成的临时链接仅在当前页面会话有效，下载完成后调用URL.revokeObjectURL释放资源，避免内存泄漏。

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