ajaxで送る方法pdfファイルを自動生成

Question

jsPDFでpdfオブジェクトを生成しました。 AJAXが添付したPDFでメールを送信したいのですが、ファイルを正しく送信できません。私はBlobオブジェクトを送信しようとし、後でPHPでbase64にデコードしようとするとメールで送信できますが、メールを受信すると拡張子なしのblobファイルを受信します。

1.-私はPDFオブジェクトを作成します。私は私の機能のAjaxの呼び出し

var pdf = new jsPDF(); // new pdf object 
pdf.text("Table title", 14, 16); // text line 
var elem = $(".tableSample")[0]; // node -> html to pdf 
var res = pdf.autoTableHtmlToJson(elem); // lib to transform htmlTables to pdf 
pdf.autoTable(res.columns, res.data, {startY: 20}); // lib to transform htmlTables to pdf 

var outputBase64 = pdf.output('datauristring'); 
var blob = new Blob([outputBase64], { type: "application/pdf"}); 

2.-を：

ajaxAdjunto({ 
    controler : "ctInformes2.php", 
    method : "enviarInforme", 
    attached : blob, 
    paramValid : { 
     mailText : "This is the mail body", 
     mailAsunto : "Este es el asunto", 
     mailDest : "mailTo@mailTo.com" 
    }, 
    callbackSucces : function (backParam) { }, 
    callbackError : function (err) { } 
}); 

3.- My機能のAjaxのために準備されているFormDataを持つ添付ファイルを送信オブジェクト：

function ajaxAdjunto(objParam){ 
url = "./controller/"+objParam.controler+"?metodo="+objParam.method; 
param = new FormData(); 
//Add to FormData mail text 
for (var item in objParam.paramValid){ 
    if (item == ""){ 
     param.append(item , "null"); 
    }else{ 
     param.append(item , objParam.paramValid[item ]); 
    } 
}  
//Add to FormData file 
param.append("adjunto", objParam.attached); 
//Call Ajax 
$.ajax({ 
    data: param, 
    type: "POST", 
    url: url, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function (backParam) { 
     objParam.callbackSucces(backParam, objParam); 
     }, 
    error: function (xhr){ 
     if (objParam.callbackError){ 
      objParam.callbackError(xhr); 
     }else{ 
      alerta(xhr.statusText); 
      console.log(xhr);   
     } 
    } 
}); 
} 

PHPコード - このサンプルでは他の$ bodyコンテンツとメールヘッダーを削除します

// var_dump -> $_FILES['attached'] 
array (size=5) 
    'name' => string 'blob' (length=4) 
    'type' => string 'application/pdf' (length=15) 
    'tmp_name' => string 'C:\Windows\Temp\php9593.tmp' (length=27) 
    'error' => int 0 
    'size' => int 6328 

// PHP CODE 
if (count($_FILES) > 0){ 
    $nameFile = $_FILES['attached ']['name']; 
    $sizeFile = $_FILES['attached ']['size']; 
    $typeFile = $_FILES['attached ']['type']; 
    $tempFile = $_FILES["attached "]["tmp_name"]; 

    $body .= "--=C=T=E=C=\r\n"; // delimiter 
    $body .= "Content-Type: application/octet-stream; "; 
    $body .= "name=" . $nameFile . "\r\n"; 
    $body .= "Content-Transfer-Encoding: base64\r\n"; 
    $body .= "Content-Disposition: attachment; "; 
    $body .= "filename=" . $nameFile . "\r\n"; 
    $body .= "\r\n"; // empty line 

    $fp = fopen($tempFile, "rb"); 
    $file = fread($fp, $sizeFile); 
    $file = chunk_split(base64_encode($file)); 

    $body .= "$file\r\n"; 
    $body .= "\r\n"; // empty line 
} 
    $body .= "--=C=T=E=C=--\r\n"; // delimiter end mail 

//Send mail 
if(mail($mailTo, $subject, $body, $header)){ 
    echo "mail was sent"; 
}else{ 
    echo "error when try send mail"; 
} 

Answer 1

ソリューションは、ポイント1である：

1º -

function dataURItoBlob(dataURI) { 
    // convert base64/URLEncoded data component to raw binary data held in a string 
    var byteString; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteString = atob(dataURI.split(',')[1]); 
    else 
     byteString = unescape(dataURI.split(',')[1]); 

    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    // write the bytes of the string to a typed array 
    var ia = new Uint8Array(byteString.length); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    return new Blob([ia], {type:mimeString}); 
} 

2ºこの機能を追加 - ポイント1では、私はこれを変更PFD作成するとき：このため

var outputBase64 = pdf.output('datauristring'); 
var blob = new Blob([outputBase64], { type: "application/pdf"}); 

を：

var outputBase64 = pdf.output('datauristring'); 
var preBlob = dataURItoBlob(outputBase64); 
var file = new File([preBlob], "namefile.pdf", {type: 'application/pdf'}); 

3度 - 楽しい！

Answer 2

あなたはここで、電子メールの添付ファイルのファイル名を指定します。

$body .= "name=" . $nameFile . "\r\n"; 

変数$nameFileは、文字列「blob」として提供されてアップロードされたファイルの名前が含まれています。ファイル名がないのでそのまま使用します。

これを変更すると、より便利なファイル名が提供され、その行に設定されます。

Javascriptでフォームデータを提供する方法の1つは、Q & Aリソース："How to give a Blob uploaded as FormData a file name?"に概説されています。