Lỗi chỉ gen ra một nửa ảnh đầu trong jspdf


#1

Xin chào mọi người, hiện tại em muốn generate một div có chứa image thành pdf:

             <div id="content" @scroll='handleScroll'>
                <div v-for='(mess, index) in message'>
                    <div>
                        <img src="http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg" v-bind:style="{width: mess.width + 'pt', height: mess.height + 'pt'}">
                    </div>
                </div>
            </div>

function savePDF() {
    var imgData;
    html2canvas($("#content"), {
        useCORS: true,
        onrendered: function (canvas) {
            imgData = canvas.toDataURL('image/png');
            var doc = new jsPDF('p', 'pt', [842, 594]);
            let width = doc.internal.pageSize.width;
            let height = doc.internal.pageSize.height;
            doc.addImage(imgData, 'PNG', -58, 0);
            doc.save('sample-file.pdf');
        }
    });
} 

cùng với đoạn js trên em test trên 3 thẻ riêng biệt thì ok, đầy đủ ảnh. Nhưng sang đến v-for thì nó chỉ cho ra đúng một nửa của một ảnh đầu thôi ạ. Mọi người giúp em giải thích với ạ


#2

Mình không xài jspdf nên không hiểu cơ chế hoạt động của onrendered, nhưng bạn thử kiểm tra xem có bị race condition không, bằng cách đặt function (canvas) vào trong setTimeout.


#3

Vâng để em thử ạ


#4

Xong em sẽ báo kết quả ạ