jQuery动态生成Google Charts转PDF遇jsPDF报错及pdfkit响应问题求助

Hey，我来帮你搞定这个困扰的问题！先理清楚错误根源，再给你几个实用的解决方案：

错误原因分析 #

你遇到的Uncaught TypeError: element.className.split is not a function，本质是jsPDF的fromHTML方法在遍历节点时，碰到了非DOM元素节点（比如文本节点、注释节点，或者Google Charts生成的SVG里的特殊节点）。这些节点没有className属性，代码强行调用split()就直接报错了。另外，Google Charts是SVG格式，fromHTML对SVG的原生支持本来就有限，这也是潜在的坑。

解决方案 #

方案1：修复jsPDF的节点判断逻辑 #

最简单的办法是修改jsPDF源码里的elementHandledElsewhere函数，先判断元素是否具备className属性再执行操作：
找到jspdf.debug.js里的这个函数，改成下面这样：

function elementHandledElsewhere(element) {
    // 先过滤非DOM元素节点
    if (!element || typeof element.className !== 'string') {
        return false;
    }
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i] === 'jspdf__ignore') {
            return true;
        }
    }
    return false;
}

如果你不想改源码，也可以在调用fromHTML前，先手动过滤掉非元素节点：

$('#pdfcon').click(function () {
    var doc = new jsPDF();
    // 克隆目标容器，清理非元素节点
    var $target = $('#pdfco').clone();
    $target.contents().filter(function() {
        // 移除文本节点、注释节点等非DOM元素
        return this.nodeType !== 1;
    }).remove();
    var source = $target.html();
    
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };
    
    doc.fromHTML(source, 0.5, 0.5, { 
        'width': 75,
        'elementHandlers': specialElementHandlers 
    }); 
    doc.output("dataurlnewwindow"); 
});

方案2：用html2canvas配合jsPDF渲染SVG图表 #

因为Google Charts是SVG，直接用fromHTML大概率渲染不全，结合html2canvas先把整个区域转成canvas，再生成PDF就靠谱多了：

$('#pdfcon').click(function () {
    html2canvas($('#pdfco')[0], {
        useCORS: true, // 处理跨域资源（如果图表有外部资源的话）
        logging: false
    }).then(function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var doc = new jsPDF('p', 'mm', 'a4');
        var imgWidth = 210; // A4宽度
        var pageHeight = 297; // A4高度
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;
        var position = 0;

        // 添加第一页
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        // 处理分页
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        doc.output("dataurlnewwindow");
    });
});

记得引入html2canvas库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

方案3：搞定python pdfkit的Ajax回传问题 #

如果你更倾向用pdfkit，那后端返回PDF的逻辑需要调整一下，以Flask为例：

1. 前端Ajax发送HTML内容：

$('#pdfcon').click(function () {
    var htmlContent = $('#pdfco').html();
    $.ajax({
        url: '/generate-pdf',
        method: 'POST',
        data: { html: htmlContent },
        xhrFields: {
            responseType: 'blob' // 指定接收二进制流
        },
        success: function(blob) {
            // 打开PDF
            var url = URL.createObjectURL(blob);
            window.open(url);
        },
        error: function(err) {
            console.error('生成PDF失败:', err);
        }
    });
});

2. 后端处理代码：

from flask import Flask, request, make_response
import pdfkit

app = Flask(__name__)

# 配置wkhtmltopdf路径（根据你的系统调整）
config = pdfkit.configuration(wkhtmltopdf=r'/usr/local/bin/wkhtmltopdf') # macOS/Linux示例
# config = pdfkit.configuration(wkhtmltopdf=r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe') # Windows示例

@app.route('/generate-pdf', methods=['POST'])
def generate_pdf():
    html_content = request.form.get('html')
    # 生成PDF二进制内容
    pdf_bytes = pdfkit.from_string(html_content, False, configuration=config)
    # 构造响应
    response = make_response(pdf_bytes)
    response.headers['Content-Type'] = 'application/pdf'
    response.headers['Content-Disposition'] = 'inline; filename=charts.pdf'
    return response

这样前端就能直接打开后端返回的PDF文件了。

额外小提示 #

别忘了，动态加载的Google Charts需要完全渲染完成后再执行PDF转换！可以监听图表的ready事件，或者在load回调里加个小延迟：

// 假设你用Google Charts的加载逻辑
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
    // 图表全部渲染完成后，再绑定PDF点击事件
    $('#pdfcon').click(function() {
        // 这里放转换逻辑
    });
});

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