使用jsPDF生成PDF时重复生成两份文件的问题求助

我用以下代码实现点击“download”按钮将图片生成PDF文件，功能基本正常，但会生成两份PDF文件而非一份，怀疑是循环导致但找不到解决方法。

原代码：

(function($) {
    $(document).ready(function() {
        $('#downloadPDF').click(function() {
            var doc = new jsPDF("p", "mm", "a4");

            function getDataUri(url, callback) {
                var image = new Image();

                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
                    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

                    canvas.getContext('2d').drawImage(this, 0, 0);

                    // Get raw image data
                    callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

                    // ... or get as Data URI
                    callback(canvas.toDataURL('image/png'));
                };

                image.src = url;
            }

            // Usage
            getDataUri('/cover.png', function(dataUri) {
                console.log('RESULT:', dataUri);
                doc.addImage(dataUri, 'png', 0, 0, 210, 297, undefined, 'FAST');
                doc.save('download.pdf')
            });
        })
    })
})(jQuery)

问题原因 #

问题出在getDataUri函数的image.onload回调中——你连续调用了两次callback函数：

• 第一次传递的是去除Data URI前缀的原始base64数据
• 第二次传递的是完整的Data URI格式数据

这会触发两次PDF保存逻辑，每次调用doc.save('download.pdf')都会生成一份文件，所以最终得到两份PDF。

修复方案 #

只保留其中一次callback调用即可。由于jsPDF的addImage方法直接支持完整的Data URI格式，保留第二次调用更简便：

修正后的代码：

(function($) {
    $(document).ready(function() {
        $('#downloadPDF').click(function() {
            var doc = new jsPDF("p", "mm", "a4");

            function getDataUri(url, callback) {
                var image = new Image();

                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
                    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

                    canvas.getContext('2d').drawImage(this, 0, 0);

                    // 只保留完整Data URI的回调调用
                    callback(canvas.toDataURL('image/png'));
                };

                image.src = url;
            }

            // Usage
            getDataUri('/cover.png', function(dataUri) {
                console.log('RESULT:', dataUri);
                doc.addImage(dataUri, 'png', 0, 0, 210, 297, undefined, 'FAST');
                doc.save('download.pdf')
            });
        })
    })
})(jQuery)

内容的提问来源于stack exchange，提问作者Wesley Silva