web-dev-qa-db-ja.com

jspdfとhtml2canvasで生成されたファイルをbase64でどのようにエンコードしますか？

添付のコードで生成されたドキュメントをエンコードしようとしていますが、何も起こらず、エラーも生成されませんが、ファイルもエンコードされず、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');
              }
             });
    }
});
javascriptjspdfhtml2canvas
5
ya va

まず、jsPDFはjavascriptでネイティブではありません。適切なソースが含まれていることを確認してください。他の参照を確認した後、doc.output（）を変換するためにbtoa（）関数は必要ないと思います。次のように指定してください。

 doc.output('datauri');

次に、base-64でエンコードされた文字列には'+'、'/'、'='を含めることができますが、そうではありませんRLセーフ文字、それらを置き換える必要があります。そうしないと、ajaxを処理できません。

しかし、私自身の経験では、ファイルのサイズによっては、非常に長くなるのは簡単です。 GETメソッドの文字の長さ制限に達する前に、エンコードされた文字列は最初にWeb開発ツールをクラッシュさせ、デバッグが困難になります。

あなたのjqueryコードによると、私の提案

processData: false,
contentType: false

多分Fileまたは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'];
6
Carr