एजेएक्स का उपयोग करके पीडीएफ फ़ाइल डाउनलोड और खोलें [javascript]


Answers

यहां बताया गया है कि मुझे यह काम कैसे मिला है

$.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();
  }
});

Download.js का उपयोग करते हुए उत्तर में अपडेट किया गया

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

Question

मेरे पास एक एक्शन क्लास है जो पीडीएफ उत्पन्न करता है I 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({
    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));
    }
});

उपरोक्त त्रुटि देता है:

आपके ब्राउज़र ने एक अनुरोध भेजा है कि यह सर्वर समझ नहीं सका।




इस तरह मैं इस मुद्दे को हल करता हूं।
इस पोस्ट पर जोनाथन Amend का जवाब मुझे बहुत मदद की
नीचे दिए गए उदाहरण को सरलीकृत किया गया है

अधिक विवरण के लिए, उपर्युक्त स्रोत कोड एक JQuery Ajax अनुरोध (GET, POST, PUT आदि) का उपयोग करके एक फ़ाइल डाउनलोड कर सकता है । यह भी, 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();
    }
};

मैंने इस वर्ग को अपने जेएस लाइब्रेरी में जोड़ा था। यह पुन: प्रयोज्य है उम्मीद है की वो मदद करदे।




मेरे लिए क्या काम किया गया है, निम्न कोड है, क्योंकि सर्वर फ़ंक्शन 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();
                }
});



क्या आपको यह अजाक्स के साथ करना है? क्या इसे एक आइफ्रेम में लोड करने की संभावना नहीं है?




अगर आपको फ़ाइल-स्ट्रीम (जैसे कोई शारीरिक रूप से सहेजे नहीं पीडीएफ) के साथ काम करना है और आप पीडीएफ पुनः लोड किए बिना पीडीएफ डाउनलोड करना चाहते हैं, तो निम्न फ़ंक्शन हमारे लिए काम करती है:

एचटीएमएल

<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>

जावास्क्रिप्ट

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

लक्ष्य = "pdf-download-output" के कारण , प्रतिक्रिया iframe में लिखी जाती है और इसलिए कोई पृष्ठ पुनः लोड निष्पादित नहीं किया जाता है, लेकिन pdf-response-stream ब्राउज़र में एक डाउनलोड के रूप में आउटपुट है।