在pdfmake中使用dataUrl出现无效图片错误
Invalid image error using dataUrl in pdfmake
我正在使用 pdfmake 在 angular 应用程序中生成 PDF 文档,并尝试使用 dataURL(在 pdfmake docs.[=13= 之后)将图像添加到输出中]
var docDefinition = {
content: [
{
table: {
widths: ['*'],
body: [
[{text: 'Table text goes here', style: 'tableCellPadded'}]
]
},
},
{
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==",
width: 152
}
'...various other text lines go here...'
],
styles: {
header: {
bold: true,
fontSize: 14
},
tableCellPadded: {
margin: [0, 15, 0, 15],
bold: true,
fontSize: 14
},
note: {
fontSize: 16,
bold: true,
italics: true
}
}
};
但是,当我尝试打印文档时,我在控制台中收到此错误:
invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)
据我所知,我在文档定义对象中正确输入了该项目,并且我的 dataURL 有效(我已经在我的浏览器中对其进行了测试)。还有什么我想念的吗?
谢谢。
好的,我将此归因于 ID-10-T 错误。我使用 base64 编码 URL 的行工作正常。我在我的文档定义对象中发现了另一行,我没有正确引用图像,那一行抛出了错误。
你可以这样试试。它会工作正常。不要忘记投票
getBase64ImageFromURL(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.onload = () => {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
resolve(dataURL);
};
img.onerror = error => {
reject(error);
};
img.src = url;
});
}
async createPdf() {
var docDefinition = {
content: [
{
image: await this.getBase64ImageFromURL("../../assets/ribbonLogo1.png")
},
我正在使用 pdfmake 在 angular 应用程序中生成 PDF 文档,并尝试使用 dataURL(在 pdfmake docs.[=13= 之后)将图像添加到输出中]
var docDefinition = {
content: [
{
table: {
widths: ['*'],
body: [
[{text: 'Table text goes here', style: 'tableCellPadded'}]
]
},
},
{
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==",
width: 152
}
'...various other text lines go here...'
],
styles: {
header: {
bold: true,
fontSize: 14
},
tableCellPadded: {
margin: [0, 15, 0, 15],
bold: true,
fontSize: 14
},
note: {
fontSize: 16,
bold: true,
italics: true
}
}
};
但是,当我尝试打印文档时,我在控制台中收到此错误:
invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)
据我所知,我在文档定义对象中正确输入了该项目,并且我的 dataURL 有效(我已经在我的浏览器中对其进行了测试)。还有什么我想念的吗?
谢谢。
好的,我将此归因于 ID-10-T 错误。我使用 base64 编码 URL 的行工作正常。我在我的文档定义对象中发现了另一行,我没有正确引用图像,那一行抛出了错误。
你可以这样试试。它会工作正常。不要忘记投票
getBase64ImageFromURL(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.onload = () => {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
resolve(dataURL);
};
img.onerror = error => {
reject(error);
};
img.src = url;
});
}
async createPdf() {
var docDefinition = {
content: [
{
image: await this.getBase64ImageFromURL("../../assets/ribbonLogo1.png")
},