ดาวน์โหลดไฟล์โดย jQuery.Ajax

ฉันมีการกระทำ Struts2 ในฝั่งเซิร์ฟเวอร์สำหรับการดาวน์โหลดไฟล์

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

อย่างไรก็ตามเมื่อฉันเรียกการกระทำโดยใช้ jQuery:

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

ใน Firebug ผมเห็นข้อมูลจะถูกดึงมากับกระแสไบนารี ฉันสงสัยว่าจะเปิดหน้าต่างดาวน์โหลดไฟล์ซึ่งผู้ใช้สามารถบันทึกไฟล์ไว้ในเครื่องได้อย่างไร

อัพเดตเบราว์เซอร์ที่ทันสมัยในปี 2019

นี่คือวิธีที่ฉันจะแนะนำในตอนนี้กับ caveats ไม่กี่:

• ต้องการเบราว์เซอร์ที่ค่อนข้างทันสมัย
• หากไฟล์ดังกล่าวมีขนาดใหญ่มากคุณควรทำสิ่งที่คล้ายกับวิธีดั้งเดิม (iframe และคุกกี้) เนื่องจากการดำเนินการด้านล่างบางอย่างอาจใช้หน่วยความจำระบบอย่างน้อยใหญ่เท่ากับไฟล์ที่ดาวน์โหลดและ / หรือ CPU ที่น่าสนใจอื่น ๆ ผลข้างเคียง.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 jQuery / iframe / Cookie แบบดั้งเดิม

Bluishถูกต้องสมบูรณ์เกี่ยวกับเรื่องนี้คุณไม่สามารถทำได้ผ่าน Ajax เนื่องจาก JavaScript ไม่สามารถบันทึกไฟล์ลงในคอมพิวเตอร์ของผู้ใช้โดยตรง (เนื่องจากปัญหาด้านความปลอดภัย) โชคไม่ดีที่ชี้URL ของหน้าต่างหลักในการดาวน์โหลดไฟล์ของคุณหมายความว่าคุณสามารถควบคุมประสบการณ์การใช้งานของผู้ใช้ได้เมื่อการดาวน์โหลดไฟล์เกิดขึ้นเพียงเล็กน้อย

ฉันสร้างjQuery File Downloadที่ให้ประสบการณ์ "Ajax like" กับการดาวน์โหลดไฟล์ที่สมบูรณ์ด้วย OnSuccess และ OnFailure callback เพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้น ลองดูที่ฉันโพสต์บล็อกเกี่ยวกับปัญหาที่พบบ่อยว่าแก้ปลั๊กอินและวิธีการที่จะใช้มันและยังมีการสาธิตของ jQuery ดาวน์โหลดไฟล์ในการดำเนินการ นี่คือแหล่งที่มา

นี่คือตัวอย่างการใช้งานอย่างง่ายโดยใช้แหล่งปลั๊กอินพร้อมสัญญา หน้าสาธิตรวมถึงอื่น ๆ อีกมากมาย 'ดีกว่า UX' เป็นตัวอย่างที่ดี

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

ขึ้นอยู่กับเบราว์เซอร์ที่คุณต้องการสนับสนุนคุณอาจใช้https://github.com/eligrey/FileSaver.js/ซึ่งอนุญาตการควบคุมที่ชัดเจนกว่าการใช้วิธีการดาวน์โหลดไฟล์ jQuery ของ IFRAME

ไม่มีใครโพสต์วิธีแก้ปัญหาของ @ Pekka นี้ ... ดังนั้นฉันจะโพสต์ มันสามารถช่วยใครบางคน

คุณไม่จำเป็นต้องทำสิ่งนี้ผ่าน Ajax เพียงแค่ใช้

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

คุณสามารถใช้ HTML5

หมายเหตุ: ข้อมูลไฟล์ที่ส่งคืนต้องเป็น base64 ที่เข้ารหัสเนื่องจากคุณไม่สามารถเข้ารหัส JSON ข้อมูลไบนารีได้

ในการAJAXตอบสนองของฉันฉันมีโครงสร้างข้อมูลที่มีลักษณะเช่นนี้:

{
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

นั่นหมายความว่าฉันสามารถทำสิ่งต่อไปนี้เพื่อบันทึกไฟล์ผ่าน AJAX

var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

ฟังก์ชัน base64ToBlob ถูกนำมาจากที่นี่และจะต้องใช้ตามฟังก์ชันนี้

function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

นี่เป็นสิ่งที่ดีถ้าเซิร์ฟเวอร์ของคุณกำลังบันทึกไฟล์ataที่จะบันทึก อย่างไรก็ตามฉันยังไม่ค่อยทราบวิธีที่จะใช้ HTML4 fallback

1. Framework agnostic: Servlet ดาวน์โหลดไฟล์เป็นไฟล์แนบ

<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

2. Struts2 Framework: การดำเนินการดาวน์โหลดไฟล์เป็นไฟล์แนบ

<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

มันจะเป็นการดีกว่าถ้าใช้<s:a>แท็กที่มีOGNLกับURL ที่สร้างด้วย<s:url>แท็ก:

<!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

ในกรณีข้างต้นคุณต้องเขียนส่วนหัวของเนื้อหา - การจัดการการตอบสนองโดยระบุว่าไฟล์จะต้องมีการดาวน์โหลด ( attachment) และไม่ได้เปิดโดยเบราว์เซอร์ ( inline) คุณต้องระบุประเภทเนื้อหาด้วยและคุณอาจต้องการเพิ่มชื่อไฟล์และความยาว (เพื่อช่วยให้เบราว์เซอร์วาดแถบความคืบหน้าตามจริง)

ตัวอย่างเช่นเมื่อดาวน์โหลด ZIP:

response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

ด้วย Struts2 (ยกเว้นว่าคุณกำลังใช้ Action เป็น Servlet, แฮ็คสำหรับการสตรีมโดยตรง ) คุณไม่จำเป็นต้องเขียนอะไรลงไปในคำตอบโดยตรง เพียงใช้ประเภทผลการสตรีมและกำหนดค่าใน struts.xml จะทำงาน: ตัวอย่าง

<result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

3. Framework agnostic (/ Struts2 framework): การเปิดไฟล์ Servlet (/ Action) ภายในเบราว์เซอร์

หากคุณต้องการเปิดไฟล์ภายในเบราว์เซอร์แทนที่จะดาวน์โหลดไฟล์ต้องกำหนดเนื้อหาการจัดการเป็นแบบอินไลน์แต่เป้าหมายไม่สามารถเป็นตำแหน่งหน้าต่างปัจจุบันได้ คุณต้องกำหนดเป้าหมายหน้าต่างใหม่ที่สร้างขึ้นโดย javascript, <iframe>ในหน้า, หรือหน้าต่างใหม่ที่สร้างขึ้นทันที, ด้วย "ที่กล่าวถึง" target = "_ blank":

<!-- From a parent page into an IFrame without javascript -->   
<a href="downloadServlet?param1=value1" target="iFrameName">
    download
</a>

<!-- In a new window without javascript --> 
<a href="downloadServlet?param1=value1" target="_blank">
    download
</a>

<!-- In a new window with javascript -->    
<a href="javascript:window.open('downloadServlet?param1=value1');" >
    download
</a>

วิธีง่ายๆในการทำให้เบราว์เซอร์ดาวน์โหลดไฟล์คือทำการร้องขอเช่นนั้น:

 function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

นี่เป็นการเปิดการดาวน์โหลดเบราว์เซอร์ขึ้นมา

ฉันได้สร้างฟังก์ชั่นเล็ก ๆ น้อย ๆ เป็นวิธีแก้ปัญหา (แรงบันดาลใจจากปลั๊กอิน @JohnCulviner):

// creates iframe and form in it with hidden field,
// then submit form with provided data
// url - form url
// data - data to form field
// input_name - form hidden input name

function ajax_download(url, data, input_name) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" +
                  "<input type=hidden name='" + input_name + "' value='" +
                  JSON.stringify(data) +"'/></form>" +
                  "</body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

ตัวอย่างเหตุการณ์การคลิก:

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2}, 'dataname');
});

ฉันประสบปัญหาเดียวกันและแก้ไขได้สำเร็จ กรณีการใช้งานของฉันคือสิ่งนี้

" โพสต์ข้อมูล JSON ไปยังเซิร์ฟเวอร์และรับไฟล์ excel ไฟล์ excel นั้นสร้างโดยเซิร์ฟเวอร์และส่งคืนเป็นการตอบกลับไปยังไคลเอนต์ดาวน์โหลดการตอบสนองนั้นเป็นไฟล์ที่มีชื่อที่กำหนดเองในเบราว์เซอร์ "

$("#my-button").on("click", function(){

// Data to post
data = {
    ids: [1, 2, 3, 4, 5]
};

// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    var a;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        // Trick for making downloadable link
        a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhttp.response);
        // Give filename you wish to download
        a.download = "test-file.xls";
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
    }
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

ตัวอย่างด้านบนกำลังทำตาม

• การโพสต์อาร์เรย์เป็น JSON ไปยังเซิร์ฟเวอร์โดยใช้ XMLHttpRequest
• หลังจากดึงเนื้อหาเป็นหยด (ไบนารี่) เรากำลังสร้าง URL ที่สามารถดาวน์โหลดได้และแนบไปยังลิงค์ "a" ที่มองไม่เห็นจากนั้นคลิก ฉันทำคำขอ POST ที่นี่ คุณสามารถรับ GET ง่ายๆได้เช่นกัน เราไม่สามารถดาวน์โหลดไฟล์ผ่าน Ajax ต้องใช้ XMLHttpRequest

ที่นี่เราจำเป็นต้องตั้งค่าบางอย่างในฝั่งเซิร์ฟเวอร์อย่างระมัดระวัง ฉันตั้งค่าส่วนหัวเล็กน้อยใน Python Django HttpResponse คุณต้องตั้งค่าให้เหมาะสมหากคุณใช้ภาษาโปรแกรมอื่น

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

เนื่องจากฉันดาวน์โหลด xls (excel) ที่นี่ฉันจึงปรับ contentType ให้อยู่เหนือระดับ คุณต้องตั้งค่าตามประเภทไฟล์ของคุณ คุณสามารถใช้เทคนิคนี้เพื่อดาวน์โหลดไฟล์ประเภทใดก็ได้

Ok ตามโค้ดของ ndpu นี่คือรุ่น ajax_download (ฉันคิดว่า) -

function ajax_download(url, data) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" 

    Object.keys(data).forEach(function(key){
        iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";

    });

        iframe_html +="</form></body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

ใช้สิ่งนี้เช่นนี้ -

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2});
});

พารามิเตอร์จะถูกส่งเป็นพารามิเตอร์โพสต์ที่เหมาะสมราวกับว่ามาจากอินพุตแทนที่จะเป็นสตริงที่เข้ารหัส json ตามตัวอย่างก่อนหน้านี้

ถ้ำ: ระวังเกี่ยวกับศักยภาพในการฉีดตัวแปรในรูปแบบเหล่านั้น อาจมีวิธีที่ปลอดภัยกว่าในการเข้ารหัสตัวแปรเหล่านั้น พิจารณาอีกทางเลือกหนึ่งหนีพวกเขา

นี่คือสิ่งที่ฉันทำคือจาวาสคริปต์ที่บริสุทธิ์และ html ไม่ได้ทดสอบ แต่สิ่งนี้ควรใช้ได้กับเบราว์เซอร์ทั้งหมด

ฟังก์ชั่น Javascript

var iframe = document.createElement('iframe');
iframe.id = "IFRAMEID";
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'SERVERURL'+'?' + $.param($scope.filtro);
iframe.addEventListener("load", function () {
     console.log("FILE LOAD DONE.. Download should start now");
});

การใช้เพียงส่วนประกอบที่ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมดไม่มีไลบรารีเพิ่มเติม

นี่คือโค้ดควบคุม JAVA Spring ของฝั่งเซิร์ฟเวอร์ของฉัน

@RequestMapping(value = "/rootto/my/xlsx", method = RequestMethod.GET)
public void downloadExcelFile(@RequestParam(value = "param1", required = false) String param1,
    HttpServletRequest request, HttpServletResponse response)
            throws ParseException {

    Workbook wb = service.getWorkbook(param1);
    if (wb != null) {
        try {
            String fileName = "myfile_" + sdf.format(new Date());
            response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
            wb.write(response.getOutputStream());
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    }

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

ใน Rails ฉันทำอย่างนี้

function download_file(file_id) {
  let url       = '/files/' + file_id + '/download_file';
    $.ajax({
    type: 'GET',
    url: url,
    processData: false,
    success: function (data) {
       window.location = url;
    },
    error: function (xhr) {
     console.log(' Error:  >>>> ' + JSON.stringify(xhr));
    }
   });
 }

เคล็ดลับคือส่วนwindow.location วิธีการควบคุมดูเหมือนว่า:

# GET /files/{:id}/download_file/
def download_file
    send_file(@file.file,
          :disposition => 'attachment',
          :url_based_filename => false)
end

ใช้window.open https://developer.mozilla.org/en-US/docs/Web/API/Window/open

ตัวอย่างเช่นคุณสามารถวางรหัสบรรทัดนี้ลงในตัวจัดการการคลิก:

window.open('/file.txt', '_blank');

มันจะเปิดแท็บใหม่ (เนื่องจากชื่อหน้าต่าง '_blank') และแท็บนั้นจะเปิด URL

รหัสฝั่งเซิร์ฟเวอร์ของคุณควรมีลักษณะดังนี้:

res.set('Content-Disposition', 'attachment; filename=file.txt');

และด้วยวิธีนี้เบราว์เซอร์ควรแจ้งให้ผู้ใช้บันทึกไฟล์ลงดิสก์แทนที่จะแสดงไฟล์ มันจะปิดแท็บที่เพิ่งเปิดโดยอัตโนมัติ

ฉันพยายามดาวน์โหลดไฟล์ CSV แล้วทำบางสิ่งหลังจากการดาวน์โหลดเสร็จสิ้น ดังนั้นฉันต้องใช้callbackฟังก์ชั่นที่เหมาะสม

การใช้window.location="..."ไม่ใช่ความคิดที่ดีเพราะฉันไม่สามารถใช้งานโปรแกรมหลังจากเสร็จสิ้นการดาวน์โหลด อย่างนี้เปลี่ยนหัวข้อดังนั้นมันไม่ใช่ความคิดที่ดี

fetchเป็นทางเลือกที่ดี แต่ไม่สามารถรองรับ IE 11ได้ และwindow.URL.createObjectURLไม่สามารถรองรับ IE 11.You สามารถดูนี้

นี่คือรหัสของฉันมันคล้ายกับรหัสของ Shahrukh Alam แต่คุณควรระวังว่าwindow.URL.createObjectURLอาจสร้างความจำรั่ว คุณสามารถดูนี้ เมื่อการตอบสนองมาถึงข้อมูลจะถูกเก็บไว้ในหน่วยความจำของเบราว์เซอร์ ดังนั้นก่อนที่คุณจะคลิกaลิงค์ไฟล์จะถูกดาวน์โหลด หมายความว่าคุณสามารถทำอะไรได้หลังจากดาวน์โหลด

$.ajax({
    url: 'your download url',
    type: 'GET',
}).done(function (data, textStatus, request) {
    // csv => Blob
    var blob = new Blob([data]);

    // the file name from server.
    var fileName = request.getResponseHeader('fileName');

    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { // for others
    var url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);

    //Do something after download 
    ...

    }
}).then(after_download)
}

วิธีดาวน์โหลดไฟล์หลังจากได้รับจาก AJAX

สะดวกเมื่อสร้างไฟล์เป็นเวลานานและคุณต้องแสดง PRELOADER

ตัวอย่างเมื่อส่งแบบฟอร์มเว็บ:

<script>
$(function () {
    $('form').submit(function () {
        $('#loader').show();
        $.ajax({
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'binary',
            xhrFields: {
                'responseType': 'blob'
            },
            success: function(data, status, xhr) {
                $('#loader').hide();
                // if(data.type.indexOf('text/html') != -1){//If instead of a file you get an error page
                //     var reader = new FileReader();
                //     reader.readAsText(data);
                //     reader.onload = function() {alert(reader.result);};
                //     return;
                // }
                var link = document.createElement('a'),
                    filename = 'file.xlsx';
                // if(xhr.getResponseHeader('Content-Disposition')){//filename 
                //     filename = xhr.getResponseHeader('Content-Disposition');
                //     filename=filename.match(/filename="(.*?)"/)[1];
                //     filename=decodeURIComponent(escape(filename));
                // }
                link.href = URL.createObjectURL(data);
                link.download = filename;
                link.click();
            }
        });
        return false;
    });
});
</script>

ฟังก์ชั่นเสริมมีการใส่ความคิดเห็นเพื่อทำให้ตัวอย่างง่ายขึ้น

ไม่จำเป็นต้องสร้างไฟล์ชั่วคราวบนเซิร์ฟเวอร์

ใน jQuery v2.2.4 ตกลง จะมีข้อผิดพลาดในเวอร์ชั่นเก่า:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

การเพิ่มบางสิ่งเพิ่มเติมเพื่อตอบข้างบนสำหรับการดาวน์โหลดไฟล์

ด้านล่างเป็นโค้ด Java Spring ที่สร้างไบต์อาร์เรย์

@RequestMapping(value = "/downloadReport", method = { RequestMethod.POST })
    public ResponseEntity<byte[]> downloadReport(
            @RequestBody final SomeObejct obj, HttpServletResponse response) throws Exception {

        OutputStream out = new ByteArrayOutputStream();
        // write something to output stream
        HttpHeaders respHeaders = new HttpHeaders();
        respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        respHeaders.add("X-File-Name", name);
        ByteArrayOutputStream bos = (ByteArrayOutputStream) out;
        return new ResponseEntity<byte[]>(bos.toByteArray(), respHeaders, HttpStatus.CREATED);
    }

ขณะนี้อยู่ในรหัสจาวาสคริปต์โดยใช้ FileSaver.js สามารถดาวน์โหลดไฟล์ด้วยรหัสด้านล่าง

var json=angular.toJson("somejsobject");
var url=apiEndPoint+'some url';
var xhr = new XMLHttpRequest();
//headers('X-File-Name')
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 201) {
        var res = this.response;
        var fileName=this.getResponseHeader('X-File-Name');
        var data = new Blob([res]);
        saveAs(data, fileName); //this from FileSaver.js
    }
}    
xhr.open('POST', url);
xhr.setRequestHeader('Authorization','Bearer ' + token);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'arraybuffer';
xhr.send(json);

ด้านบนจะทำการดาวน์โหลดไฟล์

ตกลงดังนั้นนี่คือรหัสการทำงานเมื่อใช้ MVC และคุณได้รับไฟล์จากคอนโทรลเลอร์

สมมติว่าคุณมีอาร์เรย์ไบต์ของคุณประกาศและเติมสิ่งเดียวที่คุณต้องทำคือการใช้ฟังก์ชั่นไฟล์ (ใช้ System.Web.Mvc)

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

จากนั้นในคอนโทรลเลอร์เดียวกันเพิ่มฟังก์ชั่นที่ 2

protected override void OnResultExecuting(ResultExecutingContext context)
    {
        CheckAndHandleFileResult(context);

        base.OnResultExecuting(context);
    }

    private const string FILE_DOWNLOAD_COOKIE_NAME = "fileDownload";

    /// <summary>
    /// If the current response is a FileResult (an MVC base class for files) then write a
    /// cookie to inform jquery.fileDownload that a successful file download has occured
    /// </summary>
    /// <param name="context"></param>
    private void CheckAndHandleFileResult(ResultExecutingContext context)
    {
        if (context.Result is FileResult)
            //jquery.fileDownload uses this cookie to determine that a file download has completed successfully
            Response.SetCookie(new HttpCookie(FILE_DOWNLOAD_COOKIE_NAME, "true") { Path = "/" });
        else
            //ensure that the cookie is removed in case someone did a file download without using jquery.fileDownload
            if (Request.Cookies[FILE_DOWNLOAD_COOKIE_NAME] != null)
                Response.Cookies[FILE_DOWNLOAD_COOKIE_NAME].Expires = DateTime.Now.AddYears(-1);
    }

จากนั้นคุณจะสามารถเรียกคอนโทรลเลอร์ของคุณเพื่อดาวน์โหลดและรับการติดต่อกลับ "สำเร็จ" หรือ "ล้มเหลว"

$.fileDownload(mvcUrl('name of the controller'), {
            httpMethod: 'POST',
            successCallback: function (url) {
            //insert success code

            },
            failCallback: function (html, url) {
            //insert fail code
            }
        });

ฉันพบวิธีแก้ไขที่แม้ว่าจะไม่ได้ใช้ ajax จริงๆมันช่วยให้คุณใช้การเรียกใช้จาวาสคริปต์เพื่อร้องขอการดาวน์โหลดแล้วรับการติดต่อกลับเมื่อการดาวน์โหลดเริ่มขึ้นจริง ฉันพบสิ่งนี้มีประโยชน์หากลิงก์รันสคริปต์ฝั่งเซิร์ฟเวอร์ซึ่งใช้เวลาเล็กน้อยในการเขียนไฟล์ก่อนที่จะส่ง เพื่อให้คุณสามารถแจ้งเตือนพวกเขาว่ามันกำลังดำเนินการอยู่และจากนั้นเมื่อมันส่งไฟล์ให้ลบการแจ้งเตือนการประมวลผลในที่สุด นี่คือสาเหตุที่ฉันต้องการลองโหลดไฟล์ด้วย ajax เพื่อเริ่มต้นเพื่อที่ฉันจะได้มีเหตุการณ์เกิดขึ้นเมื่อมีการร้องขอไฟล์และอีกอันเมื่อเริ่มทำการดาวน์โหลด

js ในหน้าแรก

function expdone()
{
    document.getElementById('exportdiv').style.display='none';
}
function expgo()
{
   document.getElementById('exportdiv').style.display='block';
   document.getElementById('exportif').src='test2.php?arguments=data';
}

iframe

<div id="exportdiv" style="display:none;">
<img src="loader.gif"><br><h1>Generating Report</h1>
<iframe id="exportif" src="" style="width: 1px;height: 1px; border:0px;"></iframe>
</div>

ดังนั้นไฟล์อื่น ๆ :

<!DOCTYPE html>
<html>
<head>
<script>
function expdone()
{
    window.parent.expdone();
}
</script>
</head>
<body>
<iframe id="exportif" src="<?php echo "http://10.192.37.211/npdtracker/exportthismonth.php?arguments=".$_GET["arguments"]; ?>"></iframe>
<script>document.getElementById('exportif').onload= expdone;</script>
</body></html>

ฉันคิดว่ามีวิธีอ่านรับข้อมูลโดยใช้ js ดังนั้นไม่จำเป็นต้องใช้ php แต่ฉันไม่รู้ว่ามันใช้งานไม่ได้และเซิร์ฟเวอร์ที่ฉันใช้รองรับ php ดังนั้นสิ่งนี้จึงเหมาะกับฉัน คิดว่าฉันจะแบ่งปันมันในกรณีที่ช่วยใครก็ได้

หากคุณต้องการใช้การดาวน์โหลดไฟล์ jQuery โปรดทราบสิ่งนี้สำหรับ IE คุณต้องรีเซ็ตการตอบกลับไม่เช่นนั้นจะไม่ดาวน์โหลด

    //The IE will only work if you reset response
    getServletResponse().reset();
    //The jquery.fileDownload needs a cookie be set
    getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
    //Do the reset of your action create InputStream and return

การกระทำของคุณสามารถนำServletResponseAware ไปใช้ในการเข้าถึงgetServletResponse()

มีบางอย่างที่คุณไม่สามารถทำได้ผ่านการโทร Ajax

อย่างไรก็ตามมีวิธีแก้ปัญหาคือ

ขั้นตอน:

หากคุณใช้ form.submit () เพื่อดาวน์โหลดไฟล์สิ่งที่คุณสามารถทำได้คือ:

1. สร้างการโทร ajax จากไคลเอนต์ไปยังเซิร์ฟเวอร์และจัดเก็บสตรีมไฟล์ภายในเซสชัน
2. เมื่อส่งคืน "สำเร็จ" จากเซิร์ฟเวอร์ให้โทร form.submit () ของคุณเพื่อสตรีมไฟล์สตรีมที่จัดเก็บในเซสชัน

สิ่งนี้มีประโยชน์ในกรณีที่คุณต้องการตัดสินใจว่าจะต้องดาวน์โหลดไฟล์หรือไม่หลังจากทำการ form.submit () เช่นอาจมีกรณีที่ form.submit () เกิดข้อยกเว้นที่ฝั่งเซิร์ฟเวอร์แทน จากความล้มเหลวคุณอาจต้องแสดงข้อความที่กำหนดเองในฝั่งไคลเอ็นต์ในกรณีเช่นนี้การใช้งานอาจช่วยได้

มีวิธีการอื่นในการดาวน์โหลดเว็บเพจใน ajax แต่ฉันหมายถึงหน้าที่ต้องดำเนินการก่อนแล้วจึงดาวน์โหลด

ก่อนอื่นคุณต้องแยกการประมวลผลหน้าออกจากการดาวน์โหลดผลลัพธ์

1) เฉพาะการคำนวณหน้าเท่านั้นในการโทร ajax

$ .post ("CalculusPage.php", {calculusFunction: true, ID: 29, data1: "a", data2: "b"},

       ฟังก์ชั่น (ข้อมูลสถานะ) 
       {
            ถ้า (status == "สำเร็จ") 
            {
                / * 2) ในคำตอบหน้าเว็บที่ใช้การคำนวณก่อนหน้านี้จะถูกดาวน์โหลด ตัวอย่างเช่นนี่อาจเป็นหน้าที่พิมพ์ผลลัพธ์ของตารางที่คำนวณในการโทร ajax * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// ตัวอย่างเช่น: ใน CalculusPage.php

    ถ้า (! ว่างเปล่า ($ _ POST ["calculusFunction"])) 
    {
        $ ID = $ _POST ["ID"];

        $ query = "INSERT INTO ExamplePage (data1, data2) ค่า ('". $ _ POST ["data1"]. "', '". $ _ POST ["data2"]. "ID WHERE ID =". $ ID;
        ...
    }

// ตัวอย่างเช่น: ใน DownloadPage.php

    $ ID = $ _GET ["ID"];

    $ sede = "SELECT * จากตัวอย่างหน้า WHERE id =". $ ID;
    ...

    $ ชื่อไฟล์ = "Export_Data.xls";
    header ("ประเภทเนื้อหา: application / vnd.ms-excel");
    header ("การจัดการเนื้อหา: inline; filename = $ filename");

    ...

ฉันหวังว่าโซลูชันนี้จะมีประโยชน์สำหรับหลาย ๆ คนเช่นเดียวกับฉัน

The HTML Code:-

'<button type="button" id="GetFile">Get File!</button>'


The jQuery Code:-

'$('#GetFile').on('click', function () {
    $.ajax({
        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = 'myfile.pdf';
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
});'

มันทำงานได้ดีในเบราว์เซอร์ใด ๆ (ฉันใช้ asp.net หลัก)

            function onDownload() {

  const api = '@Url.Action("myaction", "mycontroller")'; 
  var form = new FormData(document.getElementById('form1'));

  fetch(api, { body: form, method: "POST"})
      .then(resp => resp.blob())
      .then(blob => {
          const url = window.URL.createObjectURL(blob);
        $('#linkdownload').attr('download', 'Attachement.zip');
          $('#linkdownload').attr("href", url);
          $('#linkdownload')
              .fadeIn(3000,
                  function() { });

      })
      .catch(() => alert('An error occurred'));



}

 
 <button type="button" onclick="onDownload()" class="btn btn-primary btn-sm">Click to Process Files</button>
 
 
 
 <a role="button" href="#" style="display: none" class="btn btn-sm btn-secondary" id="linkdownload">Click to download Attachments</a>
 
 
 <form asp-controller="mycontroller" asp-action="myaction" id="form1"></form>
 
 

        function onDownload() {
            const api = '@Url.Action("myaction", "mycontroller")'; 
            //form1 is your id form, and to get data content of form
            var form = new FormData(document.getElementById('form1'));

            fetch(api, { body: form, method: "POST"})
                .then(resp => resp.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    $('#linkdownload').attr('download', 'Attachments.zip');
                    $('#linkdownload').attr("href", url);
                    $('#linkdownload')
                        .fadeIn(3000,
                            function() {

                            });
                })
                .catch(() => alert('An error occurred'));                 

        }

ฉันต่อสู้กับปัญหานี้มาเป็นเวลานาน ในที่สุดห้องสมุดภายนอกที่สง่างามแนะนำที่นี่ช่วยฉันออก