使用Ajax和iframe进行文件下载

I have read about doing a file download using Ajax and iframes. Can anybody give me a step by step explanation of how to do this or know of any tutorials seeing as we are already using ajax on this project this seems like the best way to do this.

我读过关于使用Ajax和iframe进行文件下载的文章。有人能一步一步地给我解释一下怎么做吗?或者知道任何教程，因为我们已经在这个项目中使用ajax了。

EDIT:

编辑:

Okay this is my view code:

这是我的视图代码

<div class="buttons">
<input type="button" value="Download File" class="button" id="downloadfile">

<script type="text/javascript">
    $(function () {
    $('#downloadfile').click(function (e) {
        $('#downloadIframe').attr('src', '@Url.Action("DownloadFile","Invoice")' + '/Report/Invoices');
    });
});
</script>

This is my controller:

这是我的控制器:

public FileResult DownloadFile(int id)
    {

        byte[] fileBytes = System.IO.File.ReadAllBytes(Server.MapPath("~/Reports/Invoices/" + Table.First(x => x.ID == id).ID + ".pdf"));
        string fileName = Table.First(x => x.ID == id).ID.ToString();
        return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Pdf, fileName);
    }

    public ActionResult Download(int id)
    {
        return AjaxResponse("Download", null);
    }

I have a Jquery context menu that I use to click on a row in a JQGrid and then open the view Download and then in the view I click the button and it should execute the script in the view and return DownloadFile FileResult in the controller but nothing happens when I click the button.

我有一个Jquery上下文菜单,我使用点击JQGrid然后打开视图中的一行然后在视图中单击下载按钮,它应该在视图中执行脚本并返回DownloadFile FileResult控制器,但当我点击按钮什么也没有发生。

The folder where the reports are: ~/Reports/Invoices

报告所在的文件夹:~/报告/发票

3 个解决方案

#1

I don't know about iframes, but my way of downloading files through ajax is just a simple writing to the response stream.

我不知道iframe，但是我通过ajax下载文件的方式只是简单地编写响应流。

    [HttpGet]
    [OutputCache(VaryByCustom="id")]
    public void DownloadFile(int id)
    {
        var path = GetFilePath(id);
        Response.ContentType = "application/octet-stream";
        Response.AppendHeader("Content-Disposition", "attachment; filename=xxx");
        Response.WriteFile(path);
        Response.End();
    }

#2

Here goes the solution -

这是解-

Say you have a controller of this way -

假设你有一个这样的控制器。

public class SubmitController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Download(string id)
    {
        string filename = String.Format("{0}.pdf", id);
        return File(System.IO.File.ReadAllBytes(Server.MapPath("~/Content/") + filename), "application/octet-stream", filename);
    }
}

Where Index action is going to return the following view -

索引操作将返回以下视图

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    $(function () {
        $('#downloadfile').click(function (e) {
            $('#downloadIframe').attr('src', '@Url.Action("Download","Submit")' + '/Report');
        });
    });

</script>

<input type="button" value="Download file" id="downloadfile"/>
<iframe id="downloadIframe"></iframe>

Once you click on the button - "Download File", you will get the iframe loaded with the URL in which we specify download Report.pdf (this can be dynamic as per your need).

点击“下载文件”按钮后，您将获得装载我们指定下载报告的URL的iframe。pdf(可以根据您的需要动态显示)。

#3

you cannot trigger the download using the ajax. but you can file download by setting the URL to the window.location

不能使用ajax触发下载。但是您可以通过将URL设置为window.location来进行下载。

In you c# return the file

在你的c#中返回文件

byte[] bytes = .... insert your bytes in the array
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "somefilename.exe");

and In the js

在js

window.location="download.action?para1=value1...."

Otherwise you can use the jquery.FileDownload plugin which handles the download.

否则，您可以使用jquery。文件下载插件，处理下载。

Edit

编辑

Try

试一试

window.location=" @string.Format("{0}{1}{2}","~/Reports/Invoices/",ViewBag.ID,".pdf") ";

#1