javascript 使用 pdfmake 在 angularjs 中生成 pdf 时图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28647253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image not showing when generating pdf in angularjs using pdfmake
提问by Shuvro
I'm using pdfmake, a nice pdf printing library in javascript to generate pdf in my angularjs SPA. Everything is working fine when I'm using only texts. The pdf is showing correctly with all texts in place. But it isn't working for me when I'm trying to show images. No error, no empty pdf, just nothing happens. There's no 404 either.
我正在使用pdfmake，这是一个不错的 javascript pdf 打印库，用于在我的 angularjs SPA 中生成 pdf。当我只使用文本时，一切正常。pdf 正确显示所有文本到位。但是当我尝试显示图像时它对我不起作用。没有错误，没有空的 pdf，什么也没有发生。也没有 404。
Here's the code I'm trying right now,
这是我现在正在尝试的代码，
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
}
]
}
回答by Mohideen bin Mohammed
Its Simple,
这很简单，
1) Convert your Image into base64 here
1）在此处将您的图像转换为 base64
2) copy your base64 code and replace into ,
2）复制您的base64代码并替换为，
image : 'base64', // use your base64 instead image.jpg
3) Done. this method is if your image is not worked by link means use base64 instead
3）完成。这种方法是，如果您的图像不是通过链接工作的，则表示使用 base64 代替
回答by markkillah
You can easily convert any image into base64 format, which is preferred according to docs. Here is a 100% working code:
您可以轻松地将任何图像转换为 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;
}
After this you simply mention it in your pdf creating code
在此之后，您只需在 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...'
}]
回答by user3677331
Can you add width:your_required_widthin the image object and check if that works? It happened to me too and what I found out was the image resolution was too big and PDFMake just showed the image in the original size which can't fit the standard size paper. For future use the PDFMake playgroundto create your document definition objects, it's very handy.
您可以添加width:your_required_width图像对象并检查它是否有效吗？我也遇到过这种情况，我发现图像分辨率太大，PDFMake 只显示原始尺寸的图像，无法适应标准尺寸的纸张。为了将来使用PDFMake 游乐场来创建您的文档定义对象，它非常方便。
