如何使用pdfmake添加图像

Question

我需要在由pdfmake生成的报告的标题中添加一个图像。但是，当遵循文档时，我无法进行此插入，甚至在将图像转换为base64时也是如此。请建议其他解决方案

做了什么:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
function epiPDF(epis){
pdfMake.vfs = pdfFonts.pdfMake.vfs;
const header = [
{
text: 'Description equipament',
bold: true,
fontFamily: 'Roboto',
decoration: 'underline',
margin: [0, 20, 0, 0],
alignment: 'center',
image: 'data:image/jpeg;base64,/9j/END_DATAURL_BASE64'
}
];
function Rodape(currentPage, pageCounf){
return [
{
text: currentPage + ' / ' + pageCounf,
alignment: 'right',
fontSize: 9,
margin: [0, 10, 20, 0]
}
]
}
const docDefinitios = {
pageSize: 'A4',
pageMargins: [10, 50, 10, 40],
header: [header],
content: [infor, rec, details],
footer: [Rodape]
}
pdfMake.createPdf(docDefinitios).download();
}
export default epiPDF;

测试base64代码是否正确

Answer 1

你能指出浏览器错误是什么吗?

我还建议您再次尝试使用pdfmake的playground中指定的base64编码图像

Answer 2

1. 你的docDef的页眉和页脚应该是函数而不是数组。

2. Pdfmake元素有特定的结构，例如文本元素不能有图像(它必须是2个分隔的元素)。

你的代码应该看起来像这样:

const getHeader = (currPage, totalPage) => [
{
text: 'Description equipament',
bold: true,
fontFamily: 'Roboto',
decoration: 'underline',
margin: [0, 20, 0, 0],
alignment: 'center',
},
{
image: 'data:image...YOUR IMAGE',
margin: [0, 20, 0, 0],
alignment: 'center',
}
]
const docDefinitions = {
pageSize: 'A4',
pageMargins: [10, 50, 10, 40],
header: getHeader,
content: [infor, rec, details],
footer: Rodape
}

欢呼