在 header pdf 上並排導出兩個圖像

Question

我一直在使用這個插件來處理數據表並導出 Excel 和 PDF 文件。 我的問題來自 PDF 文件導出，我想在 header 頁面上並排添加兩個圖像，但我得到的唯一結果是一個圖像在一行中，另一個在下一行，這是我的代碼的一部分：

                 customize: function (doc) {
                    
                    if (doc) {
                        doc.content.splice(0, 0, [{
                            margin: [0, 0, 0, 0],
                            alignment: 'left',
                            image: 'base64_Image',
                            width: 100,
                            height: 40,
                        },{
                            margin: [0, 0, 0, 0],
                            alignment: 'right',
                            image: 'base64_Image',
                            width: 100,
                            height: 40,
                        }]);

                        console.log(doc);
                    }
                }

這是結果：

問候

Answer 1

要根據需要將圖像添加到 header，建議您執行以下操作：

• 將pageMargins屬性添加到doc
• 使用doc的header屬性添加圖像。

2張圖片並排

customize: function (doc) {
    doc.pageMargins = [40, 80, 40, 60]
    doc.header = [
        {
            margin: 10,
            columns: [
                {
                    image: 'base64_Image',
                    width: 100,
                    height: 40,
                    padding: 10
                },
                {
                    image: 'base64_Image',
                    width: 100,
                    height: 40,
                }
            ],
            columnGap: 10 // optional space between columns
        },
    ]
    return doc
}

如果您想要 header 的左側圖像和右側圖像，您只需在header中添加columns屬性的調整值。 試試這樣：

customize: function (doc) {
    ...
    doc.header = [
        {
            ...
            columns: [
                {
                    image: imageBase64,
                    width: 100,
                    height: 40,
                    padding: 10
                },
                {
                    width: '*',
                    text: ''
                },
                {
                    image: imageBase64,
                    width: 100,
                    height: 40,
                }
            ],
        },
    ]
}

示例代碼在這里