0

我正在尝试将一些 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>"的而不是下载执行download.php文件时echo $_POST["html-code"];工作正常，但我想要的是在ajax调用完成后下载这个文件。

非常感谢您的帮助

4

2 回答 2

0

ajax 将简单地读取响应并且不会提示下载任何文件，因为它需要一个 html/json 字符串，并且会忽略标题的“内容处置”。为了工作，您需要 a) 使用隐藏的 iframe，并将 URL 设置为 $.ajax response() 上的文件下载或 b) 将浏览器重定向到下载位置。

于 2013-11-12T12:24:01.263 回答
0

只需发送表单而不是使用 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'];
于 2013-11-12T12:45:18.123 回答