如何通过 jQuery ajax 和 C# 下载文件

How to download file via jQuery ajax and C#

提问by rahul

I want to download a file using jQuery Ajax web method, but it's not working.

我想使用 jQuery Ajax web 方法下载文件，但它不起作用。

Here is my jQuery ajax call to web method:

这是我对 web 方法的 jQuery ajax 调用：

function GenerateExcel() {
   var ResultTable = jQuery('<div/>').append(jQuery('<table/>').append($('.hDivBox').find('thead').clone()).append($('.bDiv').find('tbody').clone()));
   var list = [$(ResultTable).html()];
   var jsonText = JSON.stringify({ list: list });
   $.ajax({
          type: "POST",
          url: "GenerateMatrix.aspx/GenerateExcel",
          data: jsonText,
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {

          },
          failure: function (response) {
               alert(response.d);
          }
            });
        }

and this is the web method definition:

这是网络方法定义：

[System.Web.Services.WebMethod()]
public static string GenerateExcel(List<string> list)
{
    HttpContext.Current.Response.AppendHeader("content-disposition", "attachment;filename=FileEName.xls");
    HttpContext.Current.Response.Charset = "";
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";
    HttpContext.Current.Response.Write(list[0]);
    HttpContext.Current.Response.End();
    return "";
} 

How to get it done?

如何完成？

One more thing: I want to download it on client PC, not to save it on server.

还有一件事：我想在客户端 PC 上下载它，而不是将它保存在服务器上。

采纳答案by rahul

well i have done it using iframe

好吧，我已经使用 iframe 完成了

this is the modified ajax function call

这是修改后的ajax函数调用

 function GenerateExcel() {
            var ResultTable = jQuery('<div/>').append(jQuery('<table/>').append($('.hDivBox').find('thead').clone()).append($('.bDiv').find('tbody').clone()));
            var list = [$(ResultTable).html()];
            var jsonText = JSON.stringify({ list: list });
            $.ajax({
                type: "POST",
                url: "GenerateMatrix.aspx/GenerateExcel",
                data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (isNaN(response.d) == false) {
                        $('#iframe').attr('src', 'GenerateMatrix.aspx?ExcelReportId=' + response.d);
                        $('#iframe').load();
                    }
                    else {
                        alert(response.d);
                    }
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

and this is the design part

这是设计部分

 <iframe id="iframe" style="display:none;"></iframe>

on Page load my code looks like this

在页面加载我的代码看起来像这样

 Response.AppendHeader("content-disposition", "attachment;filename=FileEName.xls");
 Response.Charset = "";
 Response.Cache.SetCacheability(HttpCacheability.NoCache);
 Response.ContentType = "application/vnd.ms-excel";
 Response.Write(tableHtml);
 Response.End();

回答by Lian

Assuming the C# code responds with the correct headers for Excel, you can simply redirect to the link instead of using ajax:

假设 C# 代码以正确的 Excel 标头响应，您可以简单地重定向到链接而不是使用 ajax：

var list = [$(ResultTable).html()];
var url = "GenerateMatrix.aspx/GenerateExcel";
var data = {list: list};
url += '?' + decodeURIComponent($.param(data));

// if url is an excel file, the browser will handle it (should show a download dialog)
window.location = url;

回答by vanshika pandey

1. Add these in your view page-

   <iframe id="iframe" style="display:none;"></iframe>
   <button id="download_file">Download</button>
   

2. Server side

   public string Download(string file)        
   {
   
       string filePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["FileManagementPath"]);
   
   
       string actualFilePath = System.IO.Path.Combine(filePath, file);
       HttpContext.Response.ContentType = "APPLICATION/OCTET-STREAM";
       string filename = Path.GetFileName(actualFilePath);
       String Header = "Attachment; Filename=" + filename;
       HttpContext.Response.AppendHeader("Content-Disposition", Header);           
       HttpContext.Response.WriteFile(actualFilePath);
       HttpContext.Response.End();
       return "";
   }
   

3. Add this code in your JavaScript

   <script>
   
       $('#download_file').click(function(){
   
           var path = 'e-payment_format.pdf';//name of the file
           $("#iframe").attr("src", "/FileCabinet/Download?file=" + path);
   
       });
   
    </script>
   

1. 在您的视图页面中添加这些 -

   <iframe id="iframe" style="display:none;"></iframe>
   <button id="download_file">Download</button>
   

2. 服务器端

   public string Download(string file)        
   {
   
       string filePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["FileManagementPath"]);
   
   
       string actualFilePath = System.IO.Path.Combine(filePath, file);
       HttpContext.Response.ContentType = "APPLICATION/OCTET-STREAM";
       string filename = Path.GetFileName(actualFilePath);
       String Header = "Attachment; Filename=" + filename;
       HttpContext.Response.AppendHeader("Content-Disposition", Header);           
       HttpContext.Response.WriteFile(actualFilePath);
       HttpContext.Response.End();
       return "";
   }
   

3. 在您的 JavaScript 中添加此代码

   <script>
   
       $('#download_file').click(function(){
   
           var path = 'e-payment_format.pdf';//name of the file
           $("#iframe").attr("src", "/FileCabinet/Download?file=" + path);
   
       });
   
    </script>
   

That should work!

那应该工作！