$ .whenを使用して機能が終了するまでお待ちください

Question

私のページをPDFに変換しようとしています。

私は、base64でエンコードされたイメージに変換され、jsPDFを使用してPDFに追加される2つのページを持っています。それはうまく動作します。

私の問題は、以下のコードでは、保存する前にdomtoimage関数が処理されるのを待ちます。

var doc = new jsPDF(); 
 

 
//First 
 
domtoimage.toPng(document.getElementById('page')) 
 
.then(function (dataUrl) { 
 
      doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
 
      doc.addPage(); 
 
}); 
 
//Second 
 
domtoimage.toPng(document.getElementById('page2')) 
 
.then(function (dataUrl) { 
 
      doc.addImage(dataUrl, 'png', 15, 10, 180, 280); }); 
 
//Third 
 
doc.save("file.pdf");

私は、このソリューションが見つかりました：https://api.jquery.com/jquery.when/を私は約束に慣れていないです、私はそれを動作させる方法がわかりません。

ありがとうございました。

Answer 1

var doc = new jsPDF(); 

//First 
domtoimage.toPng(document.getElementById('page')) 
.then(function (dataUrl) { 
    doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
    doc.addPage(); 
    domtoimage.toPng(document.getElementById('page2')).then(function (dataUrl) { 
     doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
     doc.save("file.pdf"); 
    }); 
}); 

Answer 2

あなたはこれを試すことができます。

var doc = new jsPDF(); 

//First 
domtoimage.toPng(document.getElementById('page')) 
.then(function (dataUrl) { 
      doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
      doc.addPage(); 

      //Second 
      domtoimage.toPng(document.getElementById('page2')) 
       .then(function (dataUrl) { 
        doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 

        //Third 
        doc.save("file.pdf");  
       }); 

}); 

Answer 3

あなたはこのために$ .whenを（）を使用することができます。..

function func1(){ 
    domtoimage.toPng(document.getElementById('page')) 
    .then(function (dataUrl) { 
     doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
     doc.addPage(); 
    }); 
} 

function func2(){ 
    domtoimage.toPng(document.getElementById('page2')) 
    .then(function (dataUrl) { 
     doc.addImage(dataUrl, 'png', 15, 10, 180, 280); }); 
} 

$.when(func1(), func2()) 
.done(function(){ 
    doc.save("file.pdf"); 
    }).fail(function(){ 
     console.log('failure'); 
}); 

Answer 4

以下のようなものを試してみてください：

var doc = new jsPDF(); 
 

 
$.when(fn1()).done(function (v1) { 
 
    console.log(v1); 
 
}); 
 

 
//First 
 
function fn1() { 
 
    domtoimage.toPng(document.getElementById('page')) 
 
    .then(function (dataUrl) { 
 
     doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
 
     doc.addPage(); 
 

 
     // Call next function. 
 
     $.when(fn2()).done(function(v2) { 
 
     console.log(v2); 
 
     }); 
 
    }); 
 

 
    return 'success'; 
 
} 
 

 
//Second 
 
function fn2() { 
 
    domtoimage.toPng(document.getElementById('page2')) 
 
    .then(function (dataUrl) { 
 
     doc.addImage(dataUrl, 'png', 15, 10, 180, 280); 
 

 
     // Call next function. 
 
     $.when(fn3()).done(function(v3) { 
 
     console.log(v3); 
 
     }); 
 
    }); 
 

 
    return 'success'; 
 
} 
 

 
//Third 
 
function fn3() { 
 
    doc.save("file.pdf"); 
 

 
    return 'success'; 
 
}