0

我正在尝试通过docDefinition从我的范围数据动态创建 PDF 来创建 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": []
        }
    ]
}
4

1 回答 1

0

首先将所有图像加载到一个数组中。然后使用画布创建 dataURLs 并将 dataURLs 加载到第二个数组中。然后将 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);
    }
于 2015-10-20T19:21:21.270 回答