如何在base64中使用jspdf和html2canvas生成一個文件？

Question

我試圖編碼中附帶的代碼生成的文件，但沒有任何反應，但不是沒有編碼的文件生成錯誤，ajaxrequest永遠不會執行

什麼是正確的方法是什麼？

html2canvas(document.getElementById("workAreaModel"), { 
    onrendered: function(canvas) 
    { 
     var img = canvas.toDataURL("image/png"); 
     var doc = new jsPDF("l", "pt", "letter"); 
     doc.addImage(img, 'JPEG',20,20); 
     var fileEncode = btoa(doc.output()); 
     $.ajax({ 
       url: '/model/send', 
       data: fileEncode, 
       dataType: 'text', 
       processData: false, 
       contentType: false, 
       type: 'GET', 
       success: function (response) { 
        alter('Exit to send request'); 
       }, 
       error: function (jqXHR) { 
        alter('Failure to send request'); 
       } 
      }); 
    } 
}); 

Answer 1

首先，jsPDF是不是在JavaScript本地人，確保你已經包括適當的來源，以及有其他引用偷看之後，我覺得你不需要BTOA（）函數進行轉換doc.output（ ），只需指定這樣的：

doc.output('datauri'); 

其次，基64編碼的字符串能夠包含'+'，'/'，'='，它們不是URL安全人物，你需要替換它們，否則你無法處理Ajax。

但是，根據我自己的經驗，根據文件的大小，很容易地獄！在達到GET方法的字符長度限制之前，編碼的字符串會首先崩潰您的Web開發人員工具，並且調試將很困難。

我的建議，根據您的jQuery代碼

processData: false, 
contentType: false 

這是常見設置發送也許文件或的Blob對象， 只是對jsPDF一看，是菱將數據轉爲BLOB：

doc.output('blob'); 

如此徹底修改代碼：

var img = canvas.toDataURL("image/png"); 
var doc = new jsPDF("l", "pt", "letter"); 
doc.addImage(img, 'JPEG',20,20); 
var file = doc.output('blob'); 
var fd = new FormData();  // To carry on your data 
fd.append('mypdf',file); 

$.ajax({ 
    url: '/model/send', //here is also a problem, depends on your 
    data: fd,   //backend language, it may looks like '/model/send.php' 
    dataType: 'text', 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function (response) { 
    alter('Exit to send request'); 
    }, 
    error: function (jqXHR) { 
    alter('Failure to send request'); 
    } 
}); 

，如果您使用的是後端的PHP，你可以對你的數據信息的查找：

echo $_FILES['mypdf'];