Codeigniter中使用JavaScript导出PHP页面为PDF空白无内容如何解决

问题核心原因 #

• 你当前遇到空白PDF的核心问题大概率是以下几种：

1. jsPDF版本不兼容：2.0及以上版本的jsPDF已经完全废弃了fromHTML方法，如果你引入的是新版本的库，该方法不会执行任何渲染操作，直接生成空白文档。
2. 渲染操作未完成就调用保存：不管是旧版的fromHTML还是新版的html渲染方法，都属于异步操作，你当前的代码在调用渲染方法后立刻执行doc.save()，内容还没写入PDF对象就已经触发保存，自然没有内容。
3. 缺少依赖库：jsPDF本身渲染HTML内容需要依赖html2canvas库处理样式和DOM节点，未引入该依赖会导致渲染失败。
4. fromHTML方法自身缺陷：旧版的fromHTML对复杂DOM、CSS样式的支持度极差，如果你#content内的内容有较多自定义样式，也可能出现渲染空白的情况。

解决方案 #

方案1：使用新版jsPDF（推荐，样式兼容性更好）

首先确认你引入的是2.x以上版本的jsPDF，同时引入html2canvas依赖，替换你的JS代码为如下内容：

$('#cmd').click(function () {
    const doc = new jsPDF('p', 'mm', 'a4');
    // 传入DOM元素而非HTML字符串，等待渲染完成后再保存
    doc.html(document.querySelector('#content'), {
        margin: 15,
        callback: function (pdf) {
            pdf.save('sample-file.pdf');
        },
        x: 10,
        y: 10,
        width: 170, // 目标PDF内的内容宽度
        windowWidth: 800 // 渲染HTML时的窗口宽度，可根据你的页面宽度调整
    });
});

如果你的项目是通过npm引入依赖，需要先安装对应的包：

npm install jspdf html2canvas

方案2：兼容旧版jsPDF的fromHTML方法

如果你要继续使用旧版的fromHTML，请先确认你的jsPDF版本为1.5.3及以下版本，调整代码等待渲染完成后保存：

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    // 传入DOM元素，添加回调函数在渲染完成后执行保存
    doc.fromHTML(document.getElementById('content'), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
    }, function() {
        doc.save('sample-file.pdf');
    });
});

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