Ασύγχρονη javascript με σύγχρονη PHP

[Επισκέπτης]

Χρησιμοποιώ σε μια εφαρμογή pdf αρχεία, για να τα εμφανίσω χρησιμοποιώ το pdf.js μια βιβλιοθήκη που βάζει με promise τα pdf σε canva και τα κάνει append στο κύριο div.

Πάνω από αυτά τα pdf υπάρχει μια φόρμα που την τυπώνω με PHP.

Αλλά τυπώνει πρώτα τις φόρμες με PHP και μετά όλα τα pdf της promise.

Αυτό που έκανα είναι να βάλω σε ένα timeout callback το innerHTML της φόρμας και να το κάνει append.

Τώρα τα βγάζει σχεδόν σωστά. Γιατί τα μεγάλα pdf αργούν.

Πώς μπορώ να τα βάλω όλα σε σειρά ;

Ευχαριστώ

[Predatorkill]

1 ώρα πριν, gekatsou είπε

Χρησιμοποιώ σε μια εφαρμογή pdf αρχεία, για να τα εμφανίσω χρησιμοποιώ το pdf.js μια βιβλιοθήκη που βάζει με promise τα pdf σε canva και τα κάνει append στο κύριο div.

Πάνω από αυτά τα pdf υπάρχει μια φόρμα που την τυπώνω με PHP.

Αλλά τυπώνει πρώτα τις φόρμες με PHP και μετά όλα τα pdf της promise.

Αυτό που έκανα είναι να βάλω σε ένα timeout callback το innerHTML της φόρμας και να το κάνει append.

Τώρα τα βγάζει σχεδόν σωστά. Γιατί τα μεγάλα pdf αργούν.

Πώς μπορώ να τα βάλω όλα σε σειρά ;

Ευχαριστώ

Αμα δε παραθεσεις κωδικα ειναι λιγο δυσκολο να σε βοηθησει καποιος

[Επισκέπτης]

Χρησιμοποιώ το pdf.js μαζί με PHP για να εμφανίσω σε μια σελίδα πολλές PHP (HTML) φόρμες μαζί με τα δικαιολογιτικά PDF που έχω στο server.

Είμαι σε καλό σημείο. Όλα τα καταλαβαίνω και τα εμφανίζω αλλά οι HTML φόρμες δεν εμφανίζονται στη σωστή σειρά.

Το pdf.js τρέχει μια js promise έτσι καθυστερεί και οι HTML φόρμες εμφανίζονται πρώτες και μετά τα pdf.

Παραθέτω τον κώδικα

pdf.js κομμάτι (Κάνει τη δουλεία του αλλά ασύγχρονα)

function renderPDF(url, canvasContainer, options) {

options = options || { scale: 1 };
    
function renderPage(page) {
    var viewport = page.getViewport(options.scale);
    var wrapper = document.createElement("div");
    wrapper.className = "canvas-wrapper";
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    wrapper.appendChild(canvas)
    canvasContainer.appendChild(wrapper);
    
    page.render(renderContext);
}

function renderPages(pdfDoc) {
    for(var num = 1; num <= pdfDoc.numPages; num++)
        pdfDoc.getPage(num).then(renderPage);
}

PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);

}

Το PHP - HTML κομμάτι είναι κάπως :

<?php
for($u=1;$u<4;$u++)
{
?>
<div id="forma<?php echo $u; ?>" style="display:none;">
  <div>Η Φόρμα με το html πίνακα</div>
</div>

<script>
setTimeout(function() { 
var para = document.createElement("div");                
para.innerHTML = document.getElementById("forma<?php echo $u; ?>").innerHTML ;
document.getElementById("all").appendChild(para); 
},0) ;

</script>

<?php

$eggrafa = json_decode($_forma['eggrafa_json'],true);


for($e=1;$e<=10;$e++)
{

    if(!empty($eggrafa[$e])) {
    

        ?>
   


<script>
url = '<?php echo $_c['domain'].'/'.$eggrafa[$e];?>';

renderPDF(url, document.getElementById('all')); // Τα τυπώνει όλα.
</script>

<?php
}
}
}
?>

Το βάζω σε SetTimeout callback το HTML κομμάτι για να το χειριστεί η javascript και να το κάνει και αυτό ασύγχρονο. 

 

Αλλά πρώτα τυπώνει όλες της HTML φόρμες και στο τέλος της σελίδας όλα τα pdf.

 

Πώς μπορώ να τα εμφανίζω με τη σειρά; 

Ευχαριστώ

Επεξ/σία 26 Ιουνίου 2021 από Επισκέπτης

[Επισκέπτης]

Τελικά το έκανα με το prepend ...