ดาวน์โหลดและเปิดไฟล์ PDF โดยใช้ Ajax

ฉันมีคลาสแอคชั่นที่สร้าง PDF contentTypeตั้งที่เหมาะสม

public class MyAction extends ActionSupport 
{
   public String execute() {
    ...
    ...
    File report = signedPdfExporter.generateReport(xyzData, props);

    inputStream = new FileInputStream(report);
    contentDisposition = "attachment=\"" + report.getName() + "\"";
    contentType = "application/pdf";
    return SUCCESS;
   }
}

ฉันเรียกสิ่งนี้action ผ่านการโทร Ajax ฉันไม่รู้วิธีส่งสตรีมนี้ไปยังเบราว์เซอร์ ฉันลองทำสองสามอย่าง แต่ไม่ได้ผล

$.ajax({
    type: "POST",
    url: url,
    data: wireIdList,
    cache: false,
    success: function(response)
    {
        alert('got response');
        window.open(response);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) 
    {
        alert('Error occurred while opening fax template' 
              + getAjaxErrorString(textStatus, errorThrown));
    }
});

ข้างต้นให้ข้อผิดพลาด:

เบราว์เซอร์ของคุณส่งคำขอที่เซิร์ฟเวอร์นี้ไม่เข้าใจ

คุณไม่จำเป็นต้องใช้ Ajax สำหรับสิ่งนี้ เพียงแค่<a>การเชื่อมโยงเป็นพอถ้าคุณตั้งค่าcontent-dispositionไปattachmentในรหัสฝั่งเซิร์ฟเวอร์ ด้วยวิธีนี้หน้าหลักจะยังคงเปิดอยู่หากนั่นเป็นข้อกังวลหลักของคุณ (ทำไมคุณถึงเลือก Ajax โดยไม่จำเป็นสำหรับสิ่งนี้?) นอกจากนี้ไม่มีวิธีใดที่จะจัดการกับสิ่งนี้ได้อย่างดี PDF ไม่ใช่ข้อมูลตัวอักษร เป็นข้อมูลไบนารี คุณไม่สามารถทำสิ่งต่างๆเช่น$(element).load(). คุณต้องการใช้คำขอใหม่ทั้งหมดสำหรับสิ่งนี้ สำหรับที่<a href="pdfservlet/filename.pdf">pdf</a>เหมาะอย่างยิ่ง

เพื่อช่วยคุณเพิ่มเติมเกี่ยวกับโค้ดฝั่งเซิร์ฟเวอร์คุณจะต้องบอกข้อมูลเพิ่มเติมเกี่ยวกับภาษาที่ใช้และโพสต์ข้อความที่ตัดตอนมาจากการพยายามใช้โค้ด

นี่คือวิธีที่ฉันได้ผล

$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob=new Blob([data]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="<FILENAME_TO_SAVE_WITH_EXTENSION>";
    link.click();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

อัปเดตคำตอบโดยใช้download.js

$.ajax({
  url: '<URL_TO_FILE>',
  success: download.bind(true, "<FILENAME_TO_SAVE_WITH_EXTENSION>", "<FILE_MIME_TYPE>")
});

ฉันไม่คิดว่าคำตอบที่ผ่านมาจะพบปัญหาของโปสเตอร์ต้นฉบับ พวกเขาทั้งหมดถือว่าคำขอ GET ในขณะที่ผู้โพสต์พยายามโพสต์ข้อมูลและได้รับการตอบสนอง

ในหลักสูตรของการค้นหาคำตอบที่ดี ๆ เราพบนี้ปลั๊กอิน jQuery ในการขออาแจ็กซ์เหมือนการดาวน์โหลดไฟล์

ใน "หัวใจ" จะสร้างรูปแบบ HTML "ชั่วคราว" ที่มีข้อมูลที่กำหนดเป็นช่องป้อนข้อมูล แบบฟอร์มนี้ต่อท้ายเอกสารและโพสต์ไปยัง URL ที่ต้องการ หลังจากนั้นแบบฟอร์มจะถูกลบออกอีกครั้ง:

jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
    .appendTo('body').submit().remove()

อัปเดตคำตอบของ Mayur ดูมีแนวโน้มและเรียบง่ายมากเมื่อเทียบกับปลั๊กอิน jQuery ที่ฉันอ้างถึง

นี่คือวิธีที่ฉันแก้ปัญหานี้
คำตอบของ Jonathan Amend ในโพสต์นี้ช่วยฉันได้มาก
ตัวอย่างด้านล่างเป็นแบบง่าย

สำหรับรายละเอียดเพิ่มเติมรหัสที่มาข้างต้นสามารถที่จะดาวน์โหลดไฟล์โดยใช้คำขอ JQuery อาแจ็กซ์ (ที่ได้รับ POST, PUT ฯลฯ ) มันยังช่วยในการอัปโหลดพารามิเตอร์เป็นJSON และการเปลี่ยนชนิดของเนื้อหาไปยังโปรแกรมประยุกต์ / JSON (ค่าเริ่มต้นของฉัน)

html ที่มา:

<form method="POST">
    <input type="text" name="startDate"/>
    <input type="text" name="endDate"/>
    <input type="text" name="startDate"/>
    <select name="reportTimeDetail">
        <option value="1">1</option>
    </select>
    <button type="submit"> Submit</button>
</form>  

รูปแบบง่ายๆที่มีข้อความป้อนสองรายการเลือกหนึ่งรายการและองค์ประกอบปุ่ม

หน้าจาวาสคริปต์มา:

<script type="text/javascript" src="JQuery 1.11.0 link"></script>
<script type="text/javascript">
    // File Download on form submition.
    $(document).on("ready", function(){
        $("form button").on("click", function (event) {
            event.stopPropagation(); // Do not propagate the event.

            // Create an object that will manage to download the file.
            new AjaxDownloadFile({
                url: "url that returns a file",
                data: JSON.stringify($("form").serializeObject())
            });

            return false; // Do not submit the form.
        });
    });
</script>  

เหตุการณ์ง่ายๆเมื่อคลิกปุ่ม สร้างวัตถุ AjaxDownloadFile ซอร์สคลาส AjaxDownloadFile อยู่ด้านล่าง

ระดับ AjaxDownloadFileแหล่งที่มา:

var AjaxDownloadFile = function (configurationSettings) {
    // Standard settings.
    this.settings = {
        // JQuery AJAX default attributes.
        url: "",
        type: "POST",
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
        },
        data: {},
        // Custom events.
        onSuccessStart: function (response, status, xhr, self) {
        },
        onSuccessFinish: function (response, status, xhr, self, filename) {
        },
        onErrorOccured: function (response, status, xhr, self) {
        }
    };
    this.download = function () {
        var self = this;
        $.ajax({
            type: this.settings.type,
            url: this.settings.url,
            headers: this.settings.headers,
            data: this.settings.data,
            success: function (response, status, xhr) {
                // Start custom event.
                self.settings.onSuccessStart(response, status, xhr, self);

                // Check if a filename is existing on the response headers.
                var filename = "";
                var disposition = xhr.getResponseHeader("Content-Disposition");
                if (disposition && disposition.indexOf("attachment") !== -1) {
                    var filenameRegex = /filename[^;=\n]*=(([""]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1])
                        filename = matches[1].replace(/[""]/g, "");
                }

                var type = xhr.getResponseHeader("Content-Type");
                var blob = new Blob([response], {type: type});

                if (typeof window.navigator.msSaveBlob !== "undefined") {
                    // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed.
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);

                    if (filename) {
                        // Use HTML5 a[download] attribute to specify filename.
                        var a = document.createElement("a");
                        // Safari doesn"t support this yet.
                        if (typeof a.download === "undefined") {
                            window.location = downloadUrl;
                        } else {
                            a.href = downloadUrl;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                        }
                    } else {
                        window.location = downloadUrl;
                    }

                    setTimeout(function () {
                        URL.revokeObjectURL(downloadUrl);
                    }, 100); // Cleanup
                }

                // Final custom event.
                self.settings.onSuccessFinish(response, status, xhr, self, filename);
            },
            error: function (response, status, xhr) {
                // Custom event to handle the error.
                self.settings.onErrorOccured(response, status, xhr, self);
            }
        });
    };
    // Constructor.
    {
        // Merge settings.
        $.extend(this.settings, configurationSettings);
        // Make the request.
        this.download();
    }
};

ฉันสร้างคลาสนี้เพื่อเพิ่มในไลบรารี JS ของฉัน สามารถใช้ซ้ำได้ หวังว่าจะช่วยได้

สิ่งที่ใช้ได้ผลสำหรับฉันคือรหัสต่อไปนี้เนื่องจากฟังก์ชันเซิร์ฟเวอร์กำลังดึงข้อมูล File(memoryStream.GetBuffer(), "application/pdf", "fileName.pdf");:

$http.get( fullUrl, { responseType: 'arraybuffer' })
            .success(function (response) {
                var blob = new Blob([response], { type: 'application/pdf' });

                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob); // for IE
                }
                else {
                    var fileURL = URL.createObjectURL(blob);
                    var newWin = window.open(fileURL);
                    newWin.focus();
                    newWin.reload();
                }
});

คุณสามารถใช้ปลั๊กอินนี้เพื่อสร้างแบบฟอร์มและส่งจากนั้นจึงลบออกจากหน้า

jQuery.download = function(url, data, method) {
    //url and data options required
    if (url && data) {
        //data can be string of parameters or array/object
        data = typeof data == 'string' ? data : jQuery.param(data);
        //split params into form inputs
        var inputs = '';
        jQuery.each(data.split('&'), function() {
            var pair = this.split('=');
            inputs += '<input type="hidden" name="' + pair[0] +
                '" value="' + pair[1] + '" />';
        });
        //send request
        jQuery('<form action="' + url +
                '" method="' + (method || 'post') + '">' + inputs + '</form>')
            .appendTo('body').submit().remove();
    };
};


$.download(
    '/export.php',
    'filename=mySpreadsheet&format=xls&content=' + spreadsheetData
);

สิ่งนี้ได้ผลสำหรับฉัน พบปลั๊กอินนี้ที่นี่

รหัสต่อไปนี้ใช้ได้ผลสำหรับฉัน

//Parameter to be passed
var data = 'reportid=R3823&isSQL=1&filter=[]';
var xhr = new XMLHttpRequest();
xhr.open("POST", "Reporting.jsp"); //url.It can pdf file path
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.responseType = "blob";
xhr.onload = function () {
    if (this.status === 200) {
        var blob = new Blob([xhr.response]);
        const url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'myFile.pdf';
        a.click();
        setTimeout(function () {
            // For Firefox it is necessary to delay revoking the ObjectURL
            window.URL.revokeObjectURL(data)
                , 100
        })
    }
};
xhr.send(data);

ในการแก้ไขปัญหา PDF เปล่าในคำขอโพสต์เพื่อรับข้อมูลสตรีมเช่น PDF เราจำเป็นต้องเพิ่มประเภทการตอบสนองเป็น 'arraybuffer' หรือ 'blob' ในคำขอ

$.ajax({
  url: '<URL>',
  type: "POST",
  dataType: 'arraybuffer',
  success: function(data) {
    let blob = new Blob([data], {type: 'arraybuffer'});
    let link = document.createElement('a');
    let objectURL = window.URL.createObjectURL(blob);
    link.href = objectURL;
    link.target = '_self';
    link.download = "fileName.pdf";
    (document.body || document.documentElement).appendChild(link);
    link.click();
    setTimeout(()=>{
        window.URL.revokeObjectURL(objectURL);
        link.remove();
    }, 100);
  }
});

เกี่ยวกับคำตอบที่ได้รับจากMayur Padshalaนี่เป็นตรรกะที่ถูกต้องในการดาวน์โหลดไฟล์ pdf ผ่าน ajax แต่เนื่องจากคนอื่น ๆ รายงานในความคิดเห็นโซลูชันนี้เป็นการดาวน์โหลด pdf เปล่า

เหตุผลนี้อธิบายไว้ในคำตอบที่ยอมรับของคำถามนี้: jQuery มีปัญหาบางอย่างในการโหลดข้อมูลไบนารีโดยใช้คำขอ AJAX เนื่องจากยังไม่ได้ใช้ความสามารถ HTML5 XHR v2 บางอย่างโปรดดูคำขอการปรับปรุงนี้และการสนทนานี้

ดังนั้นการใช้HTMLHTTPRequestรหัสควรมีลักษณะดังนี้:

var req = new XMLHttpRequest();
req.open("POST", "URL", true);
req.responseType = "blob";
req.onload = function (event) {
    var blob = req.response;
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="name_for_the_file_to_save_with_extention";
    link.click();
}

สร้าง iframe ที่ซ่อนอยู่จากนั้นในโค้ด ajax ด้านบน:

url: document.getElementById('myiframeid').src = your_server_side_url ,

และลบไฟล์ window.open(response);

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

$http({
    method: 'POST', 
    url: 'DownloadAttachment_URL',
    data: { 'fileRef': 'filename.pdf' }, //I'm sending filename as a param
    headers: { 'Authorization': $localStorage.jwt === undefined ? jwt : $localStorage.jwt },
    responseType: 'arraybuffer',
}).success(function (data, status, headers, config) {
    headers = headers();
    var filename = headers['x-filename'];
    var contentType = headers['content-type'];
    var linkElement = document.createElement('a');
    try {
        var blob = new Blob([data], { type: contentType });
        var url = window.URL.createObjectURL(blob);

        linkElement.setAttribute('href', url);
        linkElement.setAttribute("download", filename);

        var clickEvent = new MouseEvent("click", {
            "view": window,
            "bubbles": true,
            "cancelable": false
        });
        linkElement.dispatchEvent(clickEvent);
    } catch (ex) {
        console.log(ex);
    }
}).error(function (data, status, headers, config) {
}).finally(function () {

});

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

รวม download.js: http://danml.com/download.html

จากนั้นใช้ XMLHttpRequest แทนคำขอ $ .ajax ()

    var ajax = new XMLHttpRequest(); 

    ajax.open("GET", '/Admin/GetPdf' + id, true); 
    ajax.onreadystatechange = function(data) { 
        if (this.readyState == 4)
        {
            if (this.status == 200)
            {
                download(this.response, "report.pdf", "application/pdf");

            }
            else if (this.responseText != "")
            {
                alert(this.responseText);
            }
        }
        else if (this.readyState == 2)
        {
            if (this.status == 200)
            {
                this.responseType = "blob";
            }
            else
            {
                this.responseType = "text";
            }
        }
    };

    ajax.send(null);

ต้องทำกับ Ajax ไหม? มันเป็นไปได้ไหมที่จะโหลดใน iframe?

หากคุณต้องทำงานกับไฟล์สตรีม (ดังนั้นจึงไม่มี PDF ที่บันทึกไว้ทางกายภาพ) เหมือนที่เราทำและคุณต้องการดาวน์โหลด PDF โดยไม่ต้องโหลดหน้าซ้ำฟังก์ชันต่อไปนี้จะเหมาะกับเรา:

HTML

<div id="download-helper-hidden-container" style="display:none">
     <form id="download-helper-form" target="pdf-download-output" method="post">
            <input type="hidden" name="downloadHelperTransferData" id="downloadHelperTransferData" />
     </form>
     <iframe id="pdf-helper-output" name="pdf-download-output"></iframe>
</div>

Javascript

var form = document.getElementById('download-helper-form');
$("#downloadHelperTransferData").val(transferData);
form.action = "ServerSideFunctionWhichWritesPdfBytesToResponse";
form.submit();

เนื่องจากtarget = "pdf-download-output"การตอบกลับจะถูกเขียนลงใน iframe ดังนั้นจึงไม่มีการดำเนินการโหลดหน้าซ้ำ แต่ไฟล์ pdf-response-stream จะถูกส่งออกในเบราว์เซอร์เป็นการดาวน์โหลด