使用EvoPDF转换含jQuery Ajax的HTML为PDF时API数据未加载

问题说明 #

使用EvoPDF的HtmlToPdfConverter转换包含jQuery Ajax加载数据的HTML页面时，静态内容能正常生成PDF，但通过API动态加载数据的DataTables表格未被填充。该页面在浏览器中打开时可正常加载并显示表格数据。

核心原因 #

EvoPDF的转换引擎默认不会等待异步Ajax请求完成就开始生成PDF，或者相对路径的API请求在转换环境中无法正确解析，导致动态数据未加载完成。

解决方案 #

1. 延长转换等待时间 #

当前设置的ConversionDelay = 15（单位：秒）可能不足以让Ajax请求和表格渲染完成。尝试延长这个值，确保动态内容加载完毕：

htmlToPdfConverter.ConversionDelay = 30; // 等待30秒后执行转换

2. 改用绝对路径发起Ajax请求 #

页面中的Ajax使用相对路径api/csheet/?ID=' + 10，EvoPDF的渲染环境可能无法正确解析相对路径，导致API请求失败。将Ajax URL替换为完整的绝对路径：

$.ajax({
    url: 'https://localhost:44354/trm/api/csheet/?ID=' + 10, // 替换为实际的API绝对地址
    type: 'get',
    dataType: 'json',                    
    // 其余代码保持不变
});

3. 主动通知EvoPDF完成渲染（推荐方案） #

固定延迟不够灵活，最佳方式是在表格渲染完成后，主动告诉EvoPDF可以开始转换。EvoPDF支持通过window.EvoPdfClient.signalReady()触发转换：

第一步：修改C#代码，移除固定延迟

// 设置为0，等待页面主动触发转换
htmlToPdfConverter.ConversionDelay = 0;

第二步：修改页面JavaScript，在表格初始化完成后发送信号

$(document).ready(function () {
    function main() {
        $.ajax({
            url: 'api/csheet/?ID=' + 10, // 确保路径正确，或改用绝对路径
            type: 'get',
            dataType: 'json',                    
            success: function (data) {
                $('#CTable').removeClass('w3-hide');
                $("#CompanyTable").dataTable({
                    destroy: true,
                    searching: false,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                    data: data.Items,
                    sScrollX: true,
                    scrollH: true,
                    sScrollXInner: '100%',
                    processing: true,
                    bPaginate: false,                            
                    dom: 'Bfrtip',   
                    columns: [
                        { 'data': 'Name' },
                    ],
                    // 表格渲染完成后通知EvoPDF
                    initComplete: function() {
                        if (window.EvoPdfClient) {
                            window.EvoPdfClient.signalReady();
                        }
                    }
                });
            },
            // 处理请求失败的情况，避免无限等待
            error: function() {
                if (window.EvoPdfClient) {
                    window.EvoPdfClient.signalReady();
                }
            }
        });
    }
    main();
});

4. 确认JavaScript支持配置 #

确保已正确启用JavaScript支持，当前代码中的JavaScriptEnabled = true是正确的，可额外添加WebKit相关配置确保兼容性：

htmlToPdfConverter.WebKitSettings.EnableJavaScript = true;
htmlToPdfConverter.WebKitSettings.JavaScriptMode = JavaScriptMode.Enabled;

验证建议 #

1. 先测试绝对路径的Ajax请求，确认EvoPDF能正常访问API
2. 尝试延长转换延迟，排查是否是等待时间不足的问题
3. 优先使用主动通知的方式，这是处理动态内容转换最可靠的方案

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