使用 pdfmake 在 angularjs 中生成 pdf 时图像未显示答案

【问题标题】：Image not showing when generating pdf in angularjs using pdfmake使用 pdfmake 在 angularjs 中生成 pdf 时图像未显示
【发布时间】：2015-04-23 05:03:18
【问题描述】：

我正在使用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
            }
        ]
    }

【问题讨论】：

根据 pdfmake (github.com/bpampuch/pdfmake#images) 上的文档，建议使用 dataURI 图像。你已经试过了吗？

标签： javascript angularjs pdf pdfmake

【解决方案1】：

很简单，

1) 将您的图片转换为 base64 here

2）复制你的base64代码并替换成，

image : 'base64', // use your base64 instead image.jpg

3) 完成。这种方法是如果您的图像不是通过链接工作的，则使用 base64 代替

【讨论】：

【解决方案2】：

您可以轻松地将任何图像转换为 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...'
    }]

【讨论】：

嗨，markkillah，我使用了上面的代码，它在较小尺寸的图像（尺寸 100 kb）时，pdfMake 不会在 pdf 中显示图像并且控制台中也没有错误。

【解决方案3】：

你首先需要将你的图片转换成base64，然后你可以在图片属性中使用它，像这样

{
  image: 'data:image/jpeg;base64,...encodedContent...',
  width: 75,
  height: 75,
  alignment : 'left'
}

这是一个参考 - https://pdfmake.github.io/docs/0.1/document-definition-object/images/

【讨论】：

【解决方案4】：

你能在图像对象中添加width:your_required_width 并检查它是否有效吗？它也发生在我身上，我发现图像分辨率太大，PDFMake 只是以原始尺寸显示图像，不适合标准尺寸的纸张。为了将来使用PDFMake playground 创建您的文档定义对象，它非常方便。

【讨论】：