ticket_list = [0, 1, 2];
function genPDF(){
var deferreds = [];
var doc = new jsPDF();
for (let i = 0; i < ticket_list.length; i++) {
var deferred = $.Deferred();
deferreds.push(deferred.promise());
genCanvas(i, doc, deferred);
}
$.when.apply($, deferreds).then(function () { // executes after adding all images
doc.save('test.pdf');
});
}
function genCanvas(i, doc, deferred){
html2canvas(document.getElementById("div"+i), {
onrendered: function(canvas){
var img = canvas.toDataURL();
doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'center');
doc.addPage();
deferred.resolve();
}
});
}
$('#download').click(function(){
genPDF();
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div1">
<p>A</p>
</div>
<div id = "div2">
<p>B</p>
</div>
<div id = "div3">
<p>C</p>
</div>
Когда я запускаю этот скрипт, ошибки не возникает, но файл pdf странный.
Он повторяется 3 раза, но только один и тот же div отображается 3 раза.
Я не знаю, что мне делать.
Кто-нибудь, помогите мне.
황준필, с jdPDF
добавить изображение Док
addImage(imageData, format, x, y, width, height, alias, compression, rotation)
Седьмой параметр addImage - это alias
, которому вы назначаете 'center'
, его описание:
alias of the image (if used multiple times)
Таким образом, если была указана буквальная строка, в imageData
всегда добавляется один и тот же doc
,
Попробуйте использовать переменную, как показано ниже, или просто проигнорируйте этот параметр.
html2canvas(document.getElementById('div' + i), {
onrendered: function(canvas){
var img = canvas.toDataURL();
doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'div' + i);
doc.addPage();
deferred.resolve();
}
});
Я могу решить проблему, отредактировав "doc.addImage (img, 'JPEG', 0, 10, 350, 125, 'center');" в "doc.addImage (img, 'JPEG', 0, 10, 350, 125);" но порядок случайный. T.T