Question

我正在尝试通过从我的范围数据动态创建docDefinition来创建PDF。

我的数据不断变化，因此动态创作至关重要。

以下是我到目前为止所做的工作，但是我无法在docDefinition对象/数组中显示我的图像。

var getExerciseImages = function(exerciseImages) {

    var imageColumns = [];
    var imageObject = {};

    for (var i = exerciseImages.length - 1; i >= 0; i--) {

        var url = 'http://files.s3.amazonaws.com/medium/' + exerciseImages[i] + '.jpg'

        convertImgToBase64URL(url).then(function(result) {
            imageObject = {
                image: result,
                fit: [200, 200]
            };

            imageColumns.push(imageObject);
        })
    };

    return imageColumns;
};

var createPdf = function(programme) {
    var deferred = $q.defer();

    var exerciseContainer = [];
    var columns = [];

    for (var i = programme.exercises.length - 1; i >= 0; i--) {

        exerciseContainer.push({
            text: programme.exercises[i].exerciseName.toString(),
            columns: getExerciseImages(programme.exercises[i].images)
        });

    };

    var docDefinition = {
        content: exerciseContainer

    }

    deferred.resolve(docDefinition);

    return deferred.promise;
};


function convertImgToBase64URL(url, callback, outputFormat) {
    var deferred = $q.defer();

    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        // callback(dataURL);
        deferred.resolve(dataURL);
        canvas = null;
    };
    img.src = url;

    return deferred.promise;
};


$scope.downloadPdf = function(programme) {

    createPdf(programme).then(function(docDefinition) {
        console.log(JSON.stringify(docDefinition));
        pdfMake.createPdf(docDefinition).open();
    })

};

进入的数据结构如下：

{
    "title": "Core Stability 1",
    "id": "xt9E59f2tX",
    "exercises": [
        {
            "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. As you remain relaxed, gently raise the chest and ribs to straighten the spine. Maintain while raising one leg up and down followed by an arm",
            "exerciseName": "Neutral Spine on Gym ball - Single Arm or Leg lifts ",
            "images": [
                23,
                24,
                25,
                26
            ],
            "$$hashKey": "object:8"
        },
        {
            "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. As you remain relaxed, gently raise the chest and ribs to straighten the spine. ",
            "exerciseName": "Neutral Spine on Gym Ball ",
            "images": [
                2,
                3,
                4,
                5
            ],
            "reps": "1 Min",
            "sets": "3",
            "$$hashKey": "object:9"
        },
        {
            "exerciseDescription": "Sit on a Gym Ball with thighs parallel to the floor. Gently raise the chest and ribs to straighten the spine. Walk the feet forwards and lean backwards allowing the spine and shoulders to rest on the ball",
            "exerciseName": "Bridge on Gym Ball - Roll Down ",
            "images": [
                15,
                16,
                17
            ],
            "$$hashKey": "object:10"
        },
        {
            "exerciseDescription": "Assume the bridge position with neck and shoulders resting on the gym ball. Raise both arms pointing upwards. Move one arm above the head followed by the other",
            "exerciseName": "Bridge on Gym Ball - Arm Movements ",
            "images": [
                18,
                19,
                20,
                21,
                22
            ],
            "reps": "12",
            "sets": "3",
            "$$hashKey": "object:11"
        }
    ],
    "prescribedDate": "2015-04-09T16:23:57.020Z",
    "$$hashKey": "object:6"
}

这是我对docDefinition：

的了解

{
    "content": [
        {
            "text": "Half Squat ",
            "columns": []
        },
        {
            "text": "Wall Press Up",
            "columns": []
        },
        {
            "text": "Superman - Arm and Leg Lift",
            "columns": []
        },
        {
            "text": "Prone Cobra - Double Arm Shoulder Press ",
            "columns": []
        }
    ]
}

Answer 1

首先将所有图像加载到数组中。然后使用canvas创建dataURL并将dataURL加载到第二个数组中。然后将dataURL数组传递给createPdf

    createDataURLs = function (imgs,dataURLs){
         var canvas = document.createElement('CANVAS'),
             ctx = canvas.getContext('2d');
         for(var i=0;i<imgs.length;i++){
            var img=imgs[i];
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            dataURLs[img.index] = canvas.toDataURL(img.format);    
        }

        createPdf(dataURLs);
    }

    loadAllImages = function (imageURLs, callback){
        var imgs = [];
        var dataURLs = [];
        var imagesOK=0;
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            img.format=imageURLs[i].format;
            imgs.push(img);
            dataURLs.push('');
            img.index=imgs.length-1;
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback(imgs,dataURLs);
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i].url;
        }   
    }

    buildImageURLs = function(studentData){
        var imageURLs = [];
        for (var i = exerciseImages.length - 1; i ++) {

            imageURLs.push({url:'http://files.s3.amazonaws.com/medium/' + exerciseImages[i] + '.jpg',format:'image/jpeg'})
        }
        loadAllImages(imageURLs, createDataURLs);
    }

如何以编程方式创建PDFmake docDefinition

1 个答案: