Edge与Chrome中使用jsPDF仅能生成10个PDF的问题求助

问题原因 #

Chrome和Edge浏览器对短时间内的下载请求有频率限制，连续调用doc.save()超过10次时，后续请求会被浏览器自动拦截——这是浏览器的安全机制，用于防止恶意网站滥用下载功能。Firefox的限制规则不同，因此不存在该问题。

解决方案 #

方案1：给下载请求添加延迟（快速适配） #

通过setTimeout给每个下载请求设置间隔，避开浏览器的频率限制。注意每个PDF需要重新创建jsPDF实例，因为单个实例仅对应一个PDF文件。

$("#btnGetPdf").on("click", function btnGetPdf () {
    var canvas = plot.getCanvas();
    var src = canvas.toDataURL("image/png");
    // 定义所有要生成的PDF文件名
    const pdfNames = [
        'testImage1.pdf', 'testImage2.pdf', 'testImage3.pdf', 'testImage4.pdf', 'testImage5.pdf',
        'testImage6.pdf', 'testImage7.pdf', 'testImage8.pdf', 'testImage9.pdf', 'testImage10.pdf',
        'testImage11.pdf', 'testImage12.pdf', 'testImage13.pdf', 'testImage14.pdf', 'testImage15.pdf',
        'testImage16.pdf', 'testImage17.pdf', 'testImage18.pdf', 'testImage1a.pdf', 'testImage2a.pdf',
        'testImage3a.pdf', 'testImage4a.pdf', 'testImage5a.pdf', 'testImage6a.pdf', 'testImage7a.pdf',
        'testImage8a.pdf', 'testImage9a.pdf', 'testImage10a.pdf', 'testImage11a.pdf', 'testImage12a.pdf',
        'testImage13a.pdf', 'testImage14a.pdf', 'testImage15a.pdf', 'testImage16a.pdf', 'testImage17a.pdf',
        'testImage18a.pdf'
    ];

    // 逐个延迟生成下载
    pdfNames.forEach((name, index) => {
        setTimeout(() => {
            var doc = new jsPDF('landscape');
            doc.addImage(src, 'PNG', 10, 20, 280, 150);
            doc.save(name);
        }, index * 300); // 间隔300ms，可根据实际调整
    });
});

方案2：合并为单个PDF下载（推荐） #

如果业务允许，将所有内容合并到一个PDF文件中，仅触发一次下载，从根源上避免浏览器限制，同时提升用户体验。

$("#btnGetPdf").on("click", function btnGetPdf () {
    var canvas = plot.getCanvas();
    var src = canvas.toDataURL("image/png");
    var doc = new jsPDF('landscape');
    
    // 添加第一页
    doc.addImage(src, 'PNG', 10, 20, 280, 150);
    
    // 循环添加后续页面（对应原有的每个独立PDF）
    const totalPages = 36; // 要生成的总页数
    for(let i = 1; i < totalPages; i++){
        doc.addPage('landscape');
        doc.addImage(src, 'PNG', 10, 20, 280, 150);
    }
    
    // 单次下载所有内容
    doc.save('all-test-images.pdf');
});

方案3：使用Blob+自定义下载队列（灵活控制） #

将PDF转换为Blob，通过a标签模拟下载，配合队列逐个处理请求，比直接调用doc.save()更灵活，也能避开浏览器限制。

// 自定义下载函数
function downloadPdf(blob, filename) {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href); // 释放资源
}

$("#btnGetPdf").on("click", function btnGetPdf () {
    var canvas = plot.getCanvas();
    var src = canvas.toDataURL("image/png");
    const pdfNames = [
        'testImage1.pdf', 'testImage2.pdf', 
        // 补充剩余文件名列表
    ];

    // 队列处理函数
    function processQueue(index = 0) {
        if(index >= pdfNames.length) return;
        var doc = new jsPDF('landscape');
        doc.addImage(src, 'PNG', 10, 20, 280, 150);
        // 转换为Blob格式
        const pdfBlob = doc.output('blob');
        downloadPdf(pdfBlob, pdfNames[index]);
        // 延迟处理下一个请求
        setTimeout(() => processQueue(index + 1), 250);
    }

    processQueue();
});

注意事项 #

• 延迟时间设置200-500ms即可，既能避开限制，又不会让用户等待过久
• 生成大量PDF时优先选择合并方案，减少用户下载操作
• 部分浏览器可能会弹出“是否允许多次下载”的提示，需用户手动确认

内容的提问来源于stack exchange，提问作者Jeffery Donavan