pdfmake - 画像をpdfmakeで整列するにはどうすればよいですか?

Question

pdfmake を使用して PDF を作成していますが、データ URI を使用して画像を埋め込むことに成功しました。横幅が約 200px の小さな画像で、右揃えにしたいと考えています。PDFの右側に画像をプッシュする方法はありますか?

Answer 1

ドキュメント定義で定義済みのスタイルを使用して、画像を右揃えにすることができます。pdfmake プレイグラウンドには、画像の良い例があります。これを編集して、以下の「右揃え」スタイル (「rightme」と呼ばれます) を追加しました。'alignment: right' をドキュメント定義に直接追加しようとしましたが、これは機能しません。

長さのために画像データを削除しました- pdfmake プレイグラウンド画像にアクセスして、これが機能していることを確認してください。

  var dd = {
    content: [
      'pdfmake (since it\'s based on pdfkit) supports JPEG and PNG format',
      'If no width/height/fit is provided, image original size will be used',
      {
        image: 'sampleImage.jpg',
      },
      'If you specify width, image will scale proportionally',
      {
        image: 'sampleImage.jpg',
        width: 150
      },
      'If you specify both width and height - image will be stretched',
      {
        image: 'sampleImage.jpg',
        width: 150,
        height: 150,
      },
      'You can also fit the image inside a rectangle',
      {
        image: 'sampleImage.jpg',
        fit: [100, 100],
        pageBreak: 'after'
      },
    
      // Warning! Make sure to copy this definition and paste it to an
      // external text editor, as the online AceEditor has some troubles
      // with long dataUrl lines and the following image values look like
      // they're empty.
      'Images can be also provided in dataURL format...',
      {
            image: **'IMAGE TRUNCATED FOR BREVITY'**,
            width: 200,
            style: 'rightme'
      },
      'or be declared in an "images" dictionary and referenced by name',
      {
        image: 'building',
        width: 200
      },
    ],
    images: {
      building: **'IMAGE DATA TRUNCATED FOR BREVITY'**
    },
    styles:{
        rightme:
        {   
            alignment: 'right'
        }
    
    }
    
  }

Answer 2

 $('#cmd').click(function () {
         var img = document.getElementById('imgReq');
         var empImage = img.getAttribute('src');

var docDefinition = { 

        pageMargins: [0, 0, 0, 0],
        content: [
               {
                style: 'tableExample',
                table: {
                        headerRows: 1,
                        body: [
                                [ {
                                    image: 'building',
                                    width: 195,
                                    height: 185,
                                } ],

                        ]
                },
                layout: {
                                                hLineWidth: function(i, node) {
                                                        return (i === 0 || i === node.table.body.length) ? 0 : 0;
                                                },
                                                vLineWidth: function(i, node) {
                                                        return (i === 0 || i === node.table.widths.length) ? 0 : 0;
                                                },
                                                hLineColor: function(i, node) {
                                                        return (i === 0 || i === node.table.body.length) ? '#276fb8' : '#276fb8';
                                                },
                                                vLineColor: function(i, node) {
                                                        return (i === 0 || i === node.table.widths.length) ? '#276fb8' : '#276fb8';
                                                },
                                                paddingLeft: function(i, node) { return 0; },
                                                paddingRight: function(i, node) { return 0; },
                                                paddingTop: function(i, node) { return 0; },
                                                paddingBottom: function(i, node) { return 0; }
                }
        }
],styles:{
   tableExample: {
                margin: [200, 74, 0, 0],
                //alignment: 'center'
            }
          }, images: {
                building: empImage
            }
        };