使用 pdfmake 在 angularjs 中生成 pdf 时图像不显示
Image not showing when generating pdf in angularjs using pdfmake
我正在使用 pdfmake,javascript 中一个不错的 pdf 打印库在我的 angularjs SPA 中生成 pdf。当我只使用文本时一切正常。 pdf 正确显示所有文本。但是当我尝试显示图像时它对我不起作用。没有错误,没有空的 pdf,只是什么也没有发生。也没有404。
这是我现在正在尝试的代码,
var dd = {
content: [
{
image: 'picture13438908025659.jpg'
},
{
text: 'Patient\'s Detail', fontSize: 18, bold: true
},
{
columns: [
{
text: 'Patient\'s ID: ' + $scope.prescription.Patient[0].id, bold: false
},
{
text: 'Name: ' + $scope.prescription.Patient[0].name, bold: false
},
{
text: 'Age: ' + $scope.prescription.Patient[0].age, bold: false
},
{
text: 'Contact: ' + $scope.prescription.Patient[0].contact, bold: false
}
]
},
{
text: 'Address: ' + $scope.prescription.Patient[0].address, bold: false
}
]
}
您可以轻松地将任何图像转换为 base64 格式,根据文档,这是首选格式。这是一个 100% 有效的代码:
function convertImgToBase64URL(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
在此之后,您只需在 pdf 创建代码中提及它
var docDefinition = {
content: [
{
// you'll most often use dataURI images on the browser side
// if no width/height/fit is provided, the original size will be used
image: 'data:image/jpeg;base64,...encodedContent...'
}]
能否在图像对象中添加 width:your_required_width
并检查是否有效?这也发生在我身上,我发现图像分辨率太大,PDFMake 只显示原始尺寸的图像,不适合标准尺寸的纸张。为了将来使用 PDFMake playground 创建文档定义对象,它非常方便。
很简单,
1) 将您的图像转换为 base64 here
2) 复制您的 base64 代码并替换为 ,
image : 'base64', // use your base64 instead image.jpg
3) 完成。这个方法是如果你的图像不工作 link 意味着使用 base64 代替
您首先需要将您的图片转换为base64,然后您可以在图片中使用它属性,喜欢这个
{
image: 'data:image/jpeg;base64,...encodedContent...',
width: 75,
height: 75,
alignment : 'left'
}
这是一个参考 - https://pdfmake.github.io/docs/0.1/document-definition-object/images/
我正在使用 pdfmake,javascript 中一个不错的 pdf 打印库在我的 angularjs SPA 中生成 pdf。当我只使用文本时一切正常。 pdf 正确显示所有文本。但是当我尝试显示图像时它对我不起作用。没有错误,没有空的 pdf,只是什么也没有发生。也没有404。
这是我现在正在尝试的代码,
var dd = {
content: [
{
image: 'picture13438908025659.jpg'
},
{
text: 'Patient\'s Detail', fontSize: 18, bold: true
},
{
columns: [
{
text: 'Patient\'s ID: ' + $scope.prescription.Patient[0].id, bold: false
},
{
text: 'Name: ' + $scope.prescription.Patient[0].name, bold: false
},
{
text: 'Age: ' + $scope.prescription.Patient[0].age, bold: false
},
{
text: 'Contact: ' + $scope.prescription.Patient[0].contact, bold: false
}
]
},
{
text: 'Address: ' + $scope.prescription.Patient[0].address, bold: false
}
]
}
您可以轻松地将任何图像转换为 base64 格式,根据文档,这是首选格式。这是一个 100% 有效的代码:
function convertImgToBase64URL(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
在此之后,您只需在 pdf 创建代码中提及它
var docDefinition = {
content: [
{
// you'll most often use dataURI images on the browser side
// if no width/height/fit is provided, the original size will be used
image: 'data:image/jpeg;base64,...encodedContent...'
}]
能否在图像对象中添加 width:your_required_width
并检查是否有效?这也发生在我身上,我发现图像分辨率太大,PDFMake 只显示原始尺寸的图像,不适合标准尺寸的纸张。为了将来使用 PDFMake playground 创建文档定义对象,它非常方便。
很简单,
1) 将您的图像转换为 base64 here
2) 复制您的 base64 代码并替换为 ,
image : 'base64', // use your base64 instead image.jpg
3) 完成。这个方法是如果你的图像不工作 link 意味着使用 base64 代替
您首先需要将您的图片转换为base64,然后您可以在图片中使用它属性,喜欢这个
{
image: 'data:image/jpeg;base64,...encodedContent...',
width: 75,
height: 75,
alignment : 'left'
}
这是一个参考 - https://pdfmake.github.io/docs/0.1/document-definition-object/images/