下载文件无法使用iframe

时间:2012-06-18 04:13:51

标签: javascript html google-chrome iframe

我正在制作快速申请,但在用户点击“下载”时导出文件时遇到问题。

我的方法是使用内容向服务器发出ajax请求,然后在服务器上创建文件并发回文件路径。从那里,我使用文件路径调整src元素的iframe属性。

但是,Chrome(或任何浏览器,实际上)都没有发生任何事情。如果我查看检查器的 network 选项卡,它会显示它收到文件OK(带有200响应代码),并且内容就在那里。此外,iframe具有正确的src。我想要一个弹出的下载对话框,但似乎无法获得它。

有什么想法吗?谢谢!


示例代码

app.js (服务器)

app.post('/create-html', function(req, res) {

    // explicitly set the headers on the server
    res.header('Content-Type', 'application/octet-stream');
    res.header('Content-Disposition', 'attachment; filename="test.html"')

    var html      = req.body.content
       , name      = "test.html"
       , filepath  = (__dirname + "/public/files/" + name)
       , json_resp = {
            data: ''
          , err: false
         };

    fs.writeFile( filepath, html, 'utf8', function(err, data) {
        // write the file and res.send the json_resp, so we can
        // access the filename on the client
    })
})

script.js (客户端)

$("#export-html").click( function(e) {
    e.preventDefault();
    var html = $("#html-wrapper").html(); // the html of the file we want to make

    $.ajax({
          method: "POST"
        , url: "/create-html"
        , headers: {
            "Content-Disposition": 'attachment; filename="test.html"'
          }
        , type: "JSON"
        , success: function(resp) {
              var iframe = document.getElementById("iframe")
                , fp_prefix = "/files/"
                , fp = fp_prefix + resp.data; // ex: "/files/test.html" - the path where the file can be accessed

              iframe.src = fp
          }
    })

})

我在POST到服务器(200)时以及服务器重新发送数据(/create-html)时收到test.htmltest.html文件的内容显示在Web检查器中,然后转到/files/test.html显示该页面。但是,我无法下载HTML

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

使用ExpressJS,您可以使用:

apt.get('/create-html', function (req, res) {
  var name       = "test.html"
      , filepath = (__dirname + "/public/files/" + name);

  res.download(filepath, name);
});