jsPDF - サーバーにpdfを送信すると破損して終了する

Question

私は、javascript jsPDFライブラリを使用してテキストと画像を含むpdfを生成します。それからメールを送信するためにファイルをサーバーに送信したいと思います。問題は、サーバーに到着したファイルが破損していて、開くことができないか、pdf上の画像が見えないことです。

マイコード：

var pdf = btoa(doc.output()); - これはエラーを与える：Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

var pdf = btoa(encodeURIComponent(doc.output())); 
var data = new FormData(); 
data.append("data" , pdf); 
var xhr = new XMLHttpRequest(); 
xhr.open('post', '/url', true); 
xhr.send(data); 

私はまたのような他の事を試みた：

var pdf = btoa(encodeURIComponent(doc.output('blob')));を - ファイルが

開くことができません。

var pdf = btoa(doc.output('blob')); - ファイルを開くことができません。

var pdf = btoa(unescape(encodeURIComponent(doc.output()))); - ファイルが開かれますが、イメージは、いくつかの灰色の線であり、

PS：私はLaravel 5. Serverのコードを使用しています：

$data = base64_decode($_POST['data']); 
$fname = "test.pdf"; 
$file = fopen("pdf/" .$fname, 'w'); 
fwrite($file, $data); 
fclose($file); 

SOLUTION：

JSコード：

を

var blob = doc.output('blob'); 
var fd = new FormData(); 
fd.append('data', blob); 
$.ajax({ 
    type: 'POST', 
    url: '/url', 
    data: fd, 
    processData: false, 
    contentType: false 
}).done(function(data) { 
    console.log(data); 
}); 

サーバーコード：

if(!empty($_FILES['data'])){ 
    move_uploaded_file(
     $_FILES['data']['tmp_name'], 
     public_path() . '/test.pdf' 
    ); 
    return "Pdf was successfully saved."; 
} else { 
    return "No Data Sent"; 
} 

Answer 1

btoaはasciiバイトの範囲で台無しです... javascriptはすべての文字を保持することはできません。これがFileReaderのreadAsBinaryStringを使用しない理由です...文字列や〜3xより大きいbase64文字列ではなく、blob、ArrayBufferまたは型付き配列として適切なバイナリを処理してください。

var blob = doc.output('blob') 
xhr.send(blob)