使用pdfmake在angularjs生成PDF时图像不显示 [英] Image not showing when generating pdf in angularjs using pdfmake

问题描述

我使用 pdfmake ，在JavaScript一个不错的PDF打印图书馆产生在我angularjs SPA PDF格式。一切正常，当我只使用文本。 PDF格式正确显示有到位的所有文本。但它不是为我工作，当我试图显示图像。没有错误，没有空的PDF格式，只是没有任何反应。有没有既404。

这里的code我想，现在，

  VAR DD = {
        内容：
            {
                图片：picture13438908025659.jpg
            }，
            {
                文字：病人\\的详细信息，字体：18，大胆：真
            }，
            {
                列： [
                    {
                        文字：病人\\的ID：'+ $范围prescription.Patient [0] .ID，大胆：假的
                    }，
                    {
                        文字：姓名：+ $范围prescription.Patient [0] .name和大胆：假的
                    }，
                    {
                        文本：年龄：'+ $范围prescription.Patient [0]。年龄，大胆：假的
                    }，
                    {
                        文本：联系人：'+ $范围prescription.Patient [0]名为.contact，大胆：假的
                    }
                ]            }，
            {
                文本：地址：'+ $范围prescription.Patient [0]。地址，大胆：假的
            }
        ]
    }
 

解决方案

您可以轻松地将任何图像转换为Base64格式，这是根据文档pferred $ P $。这是一个100％的工作code：

 函数convertImgToBase64URL（URL，回调，OUTPUTFORMAT）{
VAR帆布=使用document.createElement（'画布'），
    CTX = canvas.getContext（'2D'），
    IMG =新的图像;
img.crossOrigin ='无名氏';
img.onload =功能（）{
    VAR dataURL;
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage（IMG，0，0）;
    dataURL = canvas.toDataURL（OUTPUTFORMAT）;
    回调（dataURL）;
    帆布= NULL;
};
img.src =网址;}
 

这你只是提到它在您的PDF创建code后

  VAR docDefinition = {
  内容：
    {
      //你会经常在浏览器端使用dataURI图片
      //如果没有提供宽/高/贴合，原稿尺寸将被使用
      形象：数据：图像/ JPEG; BASE64，恩... codedContent ......
    }]
 

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.

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
            }
        ]
    }

解决方案

You can easily convert any image into base64 format, which is preferred according to docs. Here is a 100% working code:

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

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...'
    }]

这篇关于使用pdfmake在angularjs生成PDF时图像不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！