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.服务器代码:

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

解:

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 的原因...以正确的方式处理二进制文件，不是作为字符串或大约 3 倍大的 base64 字符串，而是作为 blob、ArrayBuffer 或类型化数组，结果会很好

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