অ্যাজাক্স ব্যবহার করে পিডিএফ ফাইল ডাউনলোড এবং খুলুন

Question 1

আমার একটি অ্যাকশন ক্লাস রয়েছে যা একটি পিডিএফ জেনারেট করে। 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));
    }
});

উপরেরটি ত্রুটি দেয়:

আপনার ব্রাউজারটি একটি অনুরোধ পাঠিয়েছে যা এই সার্ভারটি বুঝতে পারে না।

Question 2

এজন্য আপনার অগত্যা অ্যাজাক্সের দরকার নেই। শুধু একটি <a>লিংক যদি আপনার সেট করা যথেষ্ট content-dispositionকরার attachmentসার্ভার প্রান্তের কোডে। এইভাবে পিতামাতার পৃষ্ঠাটি কেবল উন্মুক্ত থাকবে, যদি তা যদি আপনার প্রধান উদ্বেগ হয় (তবে অন্যথায় আপনি অযথা কেন এজাক্সকে বেছে নেবেন?)। তদ্ব্যতীত, এটি সুন্দরভাবে স্বতন্ত্রভাবে পরিচালনা করার কোনও উপায় নেই। পিডিএফ কোনও চরিত্রের ডেটা নয়। এটি বাইনারি ডেটা। আপনি মত জিনিস করতে পারবেন না $(element).load()। আপনি এটির জন্য সম্পূর্ণ নতুন অনুরোধটি ব্যবহার করতে চান । যে <a href="pdfservlet/filename.pdf">pdf</a>জন্য পুরোপুরি উপযুক্ত।

সার্ভার সাইড কোড সম্পর্কে আপনাকে আরও সহায়তা করার জন্য, আপনাকে ব্যবহৃত ভাষা সম্পর্কে আরও বলতে হবে এবং কোড প্রচেষ্টাটির একটি অংশ পোস্ট করতে হবে।

Question 3

আমি এই কাজ পেয়েছিলাম কিভাবে এখানে

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

স্নিপেট প্রসারিত করুন

Question 4

আমি সত্যিই মনে করি না যে অতীতের যে কোনও উত্তর আসল পোস্টারের সমস্যাটি খুঁজে পেয়েছিল। পোস্টার ডেটা পোস্ট করার এবং প্রতিক্রিয়াতে একটি ডাউনলোড পাওয়ার চেষ্টা করার সময় তারা সকলেই একটি জিইটি অনুরোধ অনুমান করে।

আরও ভাল উত্তরের সন্ধানের সময় আমরা এজেক্স-জাতীয় ফাইল ডাউনলোডগুলির অনুরোধ করার জন্য এই jQuery প্লাগইনটি পেয়েছি ।

এর "হার্ট" এ এটি একটি "অস্থায়ী" এইচটিএমএল ফর্ম তৈরি করে যাতে ইনপুট ক্ষেত্র হিসাবে প্রদত্ত ডেটা থাকে। এই ফর্মটি নথিতে সংযুক্ত করা হয় এবং পছন্দসই ইউআরএল পোস্ট করা হয়। এর ঠিক পরে আবার ফর্মটি সরানো হয়েছে:

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

আপডেট করা ময়ুরের উত্তরটি আমি উল্লেখ করেছি jQuery প্লাগ-ইনয়ের তুলনায় বেশ আশাব্যঞ্জক এবং খুব সহজ দেখাচ্ছে।

Question 5

এইভাবে আমি এই সমস্যাটি সমাধান করি। এই পোস্টে
জোনাথন সংশোধনীর উত্তর আমাকে অনেক সাহায্য করেছে। নীচের উদাহরণটি সরল করা হয়েছে।

আরও তথ্যের জন্য, উপরের উত্স কোডটি একটি জিকুয়েরি অ্যাজাক্স অনুরোধ (জিইটি, পোষ্ট, পুট ইত্যাদি) ব্যবহার করে একটি ফাইল ডাউনলোড করতে সক্ষম । এটি, JSON হিসাবে প্যারামিটারগুলি আপলোড করতে এবং সামগ্রী / ধরণের অ্যাপ্লিকেশন / জেসনকে (আমার ডিফল্ট) পরিবর্তন করতে সহায়তা করে ।

এইচটিএমএল উৎস:

<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 বর্গ উৎস:

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

আমি আমার জেএস লাইব্রেরিতে যুক্ত করতে এই ক্লাসটি তৈরি করেছি। এটি পুনরায় ব্যবহারযোগ্য। আশা করি এইটি কাজ করবে.

Question 6

সার্ভার ফাংশনটি পুনরুদ্ধার করার সাথে সাথে আমার জন্য যা কাজ করেছে তা নিম্নলিখিত কোড 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();
                }
});

Question 7

আপনি এই প্লাগইনটি ব্যবহার করতে পারেন যা একটি ফর্ম তৈরি করে এবং জমা দেয়, তারপরে পৃষ্ঠা থেকে সরিয়ে দেয়।

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

এটি আমার পক্ষে কাজ করেছে। এই প্লাগইনটি এখানে পেয়েছে

Question 8

নিম্নলিখিত কোডটি আমার পক্ষে কাজ করেছিল

//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);

Question 9

পিডিএফ-এর মতো স্ট্রিম ডেটা পেতে পোস্টের অনুরোধে ফাঁকা পিডিএফ ইস্যুটি ঠিক করতে, আমাদের অনুরোধে 'অ্যারেবফার' বা 'ব্লাব' হিসাবে প্রতিক্রিয়া টাইপ যুক্ত করতে হবে

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

Question 10

ময়ূর পদশালার দেওয়া উত্তরের বিষয়ে এটি এজ্যাক্সের মাধ্যমে পিডিএফ ফাইল ডাউনলোড করার সঠিক যুক্তি তবে অন্যরা মন্তব্য করেছেন যে এই সমাধানটি অবশ্যই একটি ফাঁকা পিডিএফ ডাউনলোড করেছে।

এর কারণটি এই প্রশ্নের স্বীকৃত উত্তরে ব্যাখ্যা করা হয়েছে : jQuery এজেএক্স অনুরোধগুলি ব্যবহার করে বাইনারি ডেটা লোড করার কিছু সমস্যা রয়েছে কারণ এটি এখনও কিছু HTML5 এক্সএইচআর ভি 2 সক্ষমতা বাস্তবায়ন করে না, এই বর্ধন অনুরোধটি এবং এই আলোচনাটি দেখুন ।

সুতরাং 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();
}

Question 11

একটি লুকানো iframe তৈরি করুন, তারপরে উপরে আপনার এজাক্স কোডে:

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

এবং অপসারণ window.open(response);

Question 12

এই স্নিপেটটি কৌণিক জেএস ব্যবহারকারীদের জন্য যা একই সমস্যাটির মুখোমুখি হবে, দ্রষ্টব্য যে প্রতিক্রিয়া ফাইলটি প্রোগ্রামযুক্ত ক্লিক ইভেন্ট ব্যবহার করে ডাউনলোড করা হয়েছে। এই ক্ষেত্রে, শিরোনামগুলি ফাইলের নাম এবং সামগ্রী / টাইপযুক্ত সার্ভার দ্বারা প্রেরণ করা হয়েছিল।

$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 () {

});

Question 13

আশা করি এটি আপনাকে কয়েক ঘন্টা বাঁচাতে এবং মাথা ব্যথার হাত থেকে রেহাই দেবে। এটি বের করতে আমার কিছুটা সময় লেগেছে, তবে অ্যাড্রেস বারের মাধ্যমে অনুরোধ করার সময় নিয়মিত $ .জ্যাক্স () অনুরোধটি আমার পিডিএফ ফাইলটি নষ্ট করে দেয়। সমাধানটি ছিল:

ডাউনলোড.js অন্তর্ভুক্ত করুন: js http://danML.com/download.html

তারপরে $ .ajax () অনুরোধের পরিবর্তে XMLHttpRequest ব্যবহার করুন।

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

Question 14

আপনার কি এজ্যাক্স দিয়ে করতে হবে? এটি একটি ইফ্রেমে লোড করার সম্ভাবনা কি হবে না?

Question 15

var xhr;
var beforeSend = function(){
    $('#pleasewaitDL').modal('show');
}
$(function () {
    $('#print_brochure_link').click(function(){
        beforeSend();
        xhr = new XMLHttpRequest();
        xhr.open("GET",$('#preparedPrintModalForm').attr('action'), true); 
        xhr.responseType = "blob";
        xhr.onload = function (e) {
            if (this.status === 200) {
                var file = window.URL.createObjectURL(this.response);
                var a = document.createElement("a");
                a.href = file;
                a.download = this.response.name || "Property Brochure";
                console.log(file);
                document.body.appendChild(a);
                a.click();
                
                window.onfocus = function () {                     
                  document.body.removeChild(a)
                }
                $('#pleasewaitDL').modal('hide');
            };
        };
        xhr.send($('#preparedPrintModalForm').serialize());
    });
    $('#pleasewaitDLCancel').click(function() {
        xhr.abort();
    });
});

স্নিপেট প্রসারিত করুন

Question 16

আমাদের মতো ফাইল-স্ট্রিম (সুতরাং কোনও শারীরিকভাবে সংরক্ষিত পিডিএফ) নিয়ে কাজ করতে হয় এবং আপনি পৃষ্ঠা-পুনরায় লোড ছাড়াই পিডিএফ ডাউনলোড করতে চান, নিম্নলিখিত ফাংশনটি আমাদের জন্য কাজ করে:

এইচটিএমএল

<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();

দরুন টার্গেট = "পিডিএফ ডাউনলোড-আউটপুট" , প্রতিক্রিয়া আইফ্রেম মধ্যে লেখা আছে এবং সেইজন্য কোন পাতা রিলোড মৃত্যুদন্ড কার্যকর করা হয়, কিন্তু পিডিএফ-প্রতিক্রিয়া-স্ট্রীম একটি ডাউনলোড যেমন ব্রাউজারে আউটপুট।