如何在pdfmake生成的PDF报告页眉中成功添加图片

你的代码有4处写法不符合pdfmake的规则，和base64编码正确性无关：

• 单个内容节点不能同时配置text和image属性，pdfmake的节点是单类型的，同时声明时引擎只会识别为文本节点，直接忽略image字段配置
• header、footer字段多套了一层无意义的数组，且页脚传的是包裹函数的数组，引擎不会自动解析执行
• 图片没有设置宽高属性，默认会加载原始分辨率，如果原图尺寸过大，会超出页眉可视区域，看起来和加载失败效果一样
• 页面上边距预留不足，页眉内容可能被正文遮挡

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

function epiPDF(epis){
    pdfMake.vfs = pdfFonts.pdfMake.vfs;

    // 页眉：图片和文本拆分为独立节点，用columns实现左右布局
    const header = {
        margin: [10, 20, 10, 10],
        columns: [
            // 独立图片节点
            {
                image: 'data:image/jpeg;base64,/9j/END_DATAURL_BASE64',
                width: 50, // 按需调整图片宽度，引擎会自动等比缩放
                height: 20
            },
            // 独立文本节点
            {
                text: 'Description equipament',
                bold: true,
                fontFamily: 'Roboto',
                decoration: 'underline',
                alignment: 'center',
                width: '*' // 占满除图片外的剩余宽度
            }
        ]
    };

    // 页脚函数
    function Rodape(currentPage, pageCount){
        return {
            text: `${currentPage} / ${pageCount}`,
            alignment: 'right',
            fontSize: 9,
            margin: [0, 10, 20, 0]
        }
    }

    const docDefinitios = {
        pageSize: 'A4',
        pageMargins: [10, 60, 10, 40], // 上边距留足页眉空间，避免和正文重叠
        header: header,
        content: [infor, rec, details],
        footer: Rodape // 直接传函数引用，不要套数组
    }
    pdfMake.createPdf(docDefinitios).download();
}

export default epiPDF;

• 如果需要图片在标题上方垂直排列，把columns替换为stack数组，按顺序放入图片节点、文本节点即可
• 如果页眉需要动态内容，可以把header也写成和页脚一样的函数，接收当前页码、总页数参数返回节点配置
• 复制base64字符串时注意不要混入换行、空格，否则会导致图片解析失败

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