Question

我正在尝试将一些HTML代码发送到服务器并将其放入文件并从浏览器下载

这是HTML代码

<div id="mycode">
  <p>....</p>
  <div>
    .
    .
    .
  </div>
</div>

当单击一个按钮时，我尝试通过jquery ajax将此html代码发送到服务器，我使用此代码来实现此操作（我知道我的jquery代码缺少某些东西）。

$(".my-button").on("click",function(e){
        e.preventDefault();
        var htmlcontent = $("#mycode").html();

        $.ajax({
            url : "download.php",
            type : "POST",
            data : {"html-code": htmlcontent},

            success : function(){

            },
            error: function(){
                //alert("something wrong");
            }
        });

    })

download.php看起来像这样：

<?php


    header("Content-disposition: attachment; filename=test.html");
    header("Content-type: text/html");

    $fiile = 'test.html';


    ob_start();
    // write content
    echo $_POST["html-code"];
    $content = ob_get_contents();
    ob_end_clean();
    file_put_contents($file,$content);


    readfile("test.html");


?>

当我用简单的echo "<h1>bla bla bla</h1>"而不是echo $_POST["html-code"];执行download.php文件时，下载工作正常，但我想要的是在ajax调用完成后下载此文件。

非常感谢您的帮助

Answer 1

ajax只会读取响应，并且不会提示任何文件进行下载，因为它需要一个html / json字符串，并且会忽略标题的“content-disposition”。为了工作，你需要a）使用隐藏的iframe，并在$ .ajax response（）上设置url到文件下载，或b）将浏览器重定向到下载位置。

Answer 2

只需发送表单而不是使用AJAX请求。您可以创建隐藏的表单，在需要时更改其输入值并使用JavaScript发送它。

由于您的download.php文件有一些HTTP标头告诉浏览器它应该下载响应，因此您不会被重定向，而是要求保存该文件。我可以使用以下代码：

<强> HTML

<div id="mycode">Lorem ipsum dolor sit amet</div>
<button class="my-button">download</button>

<form id="download-form" action="download.php" method="post">
    <input type="hidden" name="html-code" value="" />
</form>

<强>的JavaScript

$(".my-button").on("click",function(e) {
    e.preventDefault();
    var htmlcontent = $("#mycode").html();
    $('#download-form').find('input').val(htmlcontent).end().submit();
});

download.php （简化仅用于测试目的）

<?php
header("Content-disposition: attachment; filename=test.html");
header("Content-type: text/html");
echo $_POST['html-code'];

将HTML代码发送到服务器并下载

2 个答案: