在 header pdf 上并排导出两个图像
Export two images side by side on header pdf
我一直在使用 this plugin 获取数据 table 并导出 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);
}
}
这是结果:
此致
要根据需要将图像添加到页眉,我建议您执行以下操作:
- 将
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
中添加columns
属性的调整值。像这样尝试:
customize: function (doc) {
...
doc.header = [
{
...
columns: [
{
image: imageBase64,
width: 100,
height: 40,
padding: 10
},
{
width: '*',
text: ''
},
{
image: imageBase64,
width: 100,
height: 40,
}
],
},
]
}
示例代码here
我一直在使用 this plugin 获取数据 table 并导出 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);
}
}
这是结果:
此致
要根据需要将图像添加到页眉,我建议您执行以下操作:
- 将
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
中添加columns
属性的调整值。像这样尝试:
customize: function (doc) {
...
doc.header = [
{
...
columns: [
{
image: imageBase64,
width: 100,
height: 40,
padding: 10
},
{
width: '*',
text: ''
},
{
image: imageBase64,
width: 100,
height: 40,
}
],
},
]
}
示例代码here