FPDF - 受密码保护的 pdf 未下载

Question

I am trying to generate a password protected pdf using my php script. This is my code:

JS :

 $.ajax({
       url: 'backend.php',
       type: 'POST',
       data:   {"input": "generate_pdf",
                "password": document.getElementById("password").value},
       success:function(response){
             alert(response);
       },
       complete:function(){

       }
    });

PHP :

<?php
    if(isset($_POST["input"])){
         if($_POST["input"] == "sign in"){
            ob_start();
            require('FPDF_protection.php');
            $pdf = new FPDF_Protection();
            $pdf->SetProtection(array('print'), $_POST["password"]);
            $pdf->AddPage();
            $pdf->SetFont('Arial');
            $pdf->Write(10,"Hello");
            $pdf->Output('D',"Recovery_code.pdf");
            ob_end_flush(); 
           }
         }
?>

But, when I run the code an alert pops up showing showing this:

%PDF-1.3 3 0 obj <</Type /Page /Parent 1 0 R /Resources 2 0 R /Contents 4 0 R>> endobj 4 0 obj <</Filter /FlateDecode /Length 90>> stream Fҧ�J�1�v"I�E���2��vE�*��q�6/~=�Y�d@ྒྷ����-�����̾�M>~u�<�� �b} �f}-��b� endstream endobj 1 0 obj <</Type /Pages /Kids [3 0 R ] /Count 1 /MediaBox [0 0 595.28 841.89]

endobj 5 0 obj <</Filter /FlateDecode /Length 364>> stream �r⹧����[�gFE��5'��Ά'oYt5��5hb%a�������Fc�2�g����d���u��Ɉ[��u�^$,���x�<FN�%jAKz}��8���I���_3m�� u?��}~@�y�<:>����|��ḣ���n0X�9X�0J8OG���6(���c[��E�#�R�m�ۮ��8w�-��~��n� ��ؿ��XϻG��^��t�8BF����������E�����֖�H �7T^�~u�A�{?�y>�csG;�xo�,��q��[J�_W)�"j� �,O�7n\9�olN�8n

I don't understand, why the pdf isn't downloading. Please help me.

Answer 1

Update; I have dropped jQuery and used XMLHttpRequest instead

var req = new XMLHttpRequest();
var params = "input=generate_pdf&password=" + document.getElementById("password").value;
req.open("POST", "backend.php", true);
req.responseType = "blob";
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.onreadystatechange = function ()
 {
  if (req.readyState === 4 && req.status === 200)
   {
    var blob=new Blob([req.response]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="your_file_name_here.pdf";
    link.click();
   }
 };
req.send(params);

This should force the file to download.

Working example

I changed the code a bit for the demo, but the concept remains the same, here: https://jsfiddle.net/ntmwks9q/