使用 jsPDF 和 PHP 在服务器上保存生成的 PDF 文件

Question

我试图将生成的带有 JSPDF 插件的 PDF 文件保存到服务器中，而不是保存在客户端，处理 JsPDF 的 javascript 部分是这样的：

<script type="text/javascript">

(function(){
 var 
form = $('.form'),
cache_width = form.width(),
//cache_height = form.height(),
a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
 });
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
    var 
    img = canvas.toDataURL("image/png"),

    doc = new jsPDF({
      unit:'px', 
      format:'a4'
    });     

 var imgWidth = 220;
 var pageHeight = 295;  
 var imgHeight = canvas.height * imgWidth / canvas.width;
 var heightLeft = imgHeight;

 var doc = new jsPDF('p', 'mm');
 var position = 0;

 doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
 heightLeft -= pageHeight;

 while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
   }

 var blob = doc.output('blob');
 var formData = new FormData();
 formData.append('pdf', blob);
  $.ajax({
url: 'upload.php', 
type: 'POST',
data: formData,
dataType: 'text',
cache: false,
processData: false,
contentType: false,
success: function(response){
alert(response); 
console.log(response)
 },
   error: function(err){
         alert(err);
        console.log(err)
  }
 });

});
  }

// create canvas object
    function getCanvas(){
      form.width((a4[0]*1.33333) -80).css('max-width','none');
      return html2canvas(form,{
       imageTimeout:2000,
       removeContainer:true
       });  
     }

  }());

 </script>

upload.php 文件应该将生成的 pdf 文件或其内容移动到 Uploads 文件夹，但似乎 $_FILES['data'] 为空

   <?php
    if(!empty($_FILES['data'])) {
// PDF is located at $_FILES['data']['tmp_name']

$content = file_get_contents($_FILES['data']['tmp_name']);
//echo $content;
$location = "uploads/";
move_uploaded_file($_FILES['data']['tmp_name'], $location.'random-name.pdf');

  } else {
throw new Exception("no data");
  }

我从 Ajax 得到的响应是“注意：未定义索引：数据”。 在此先感谢您的帮助。

Answer 1

我终于使用以下代码让它工作了：

var pdf = btoa(doc.output()); 

    var file_name = $('#id').val();
    //var file_name = 'hello world';
        $.ajax({
          method: "POST",
          url: "upload.php",
          data: {data: pdf, filename: file_name},
        }).done(function(data){
        //   alert(data);
           console.log(data);
        }); 

在服务器端 upload.php 像这样：

if(!empty($_POST['data'])){
 $data = base64_decode($_POST['data']);

 $fileName = $_POST['filename'];

 file_put_contents( "uploads/".$fileName.".pdf", $data );
 } else {
 echo "No Data Sent";
 }
 exit();