如何在pdfmake中将Base64格式图片置于标题之前？

Hey there! Let me walk you through exactly how to position your Base64 image in front of your document title using pdfmake. It’s simpler than you might think—we just need to leverage pdfmake’s layout structures correctly.

Method 1: Using Columns for Precise Layout Control #

This is great if you want to fine-tune the size of the image and the spacing between it and the title. Here’s a complete example:

var docDefinition = {
  content: [
    {
      columns: [
        // First column: Your Base64 image
        {
          image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM3OWFmcGxlAAAAXUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==',
          width: 40, // Adjust this to set your image size
          height: 40
        },
        // Second column: Your title
        {
          text: 'Your Document Title Here',
          fontSize: 24,
          bold: true,
          margin: [10, 0, 0, 0] // Adds 10px of left margin to the title for spacing
        }
      ],
      alignment: 'left' // Ensures the entire row is left-aligned
    },
    // Rest of your document content goes here
    { text: 'Rest of the document body...', marginTop: 20 }
  ]
};

// Generate the PDF
pdfMake.createPdf(docDefinition).download('document-with-title-image.pdf');

Method 2: Inline Image Within the Title Text #

If you want the image to sit directly in the same text flow as your title (like an icon next to text), you can embed it as an inline element in the text array:

var docDefinition = {
  content: [
    {
      text: [
        {
          image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM3OWFmcGxlAAAAXUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==',
          width: 30,
          height: 30,
          margin: [0, 0, 8, 0] // Adds 8px right margin to the image for spacing
        },
        { text: 'Your Inline Title With Image', fontSize: 24, bold: true }
      ]
    },
    // Rest of your content
    { text: 'More document content...', marginTop: 20 }
  ]
};

pdfMake.createPdf(docDefinition).download('inline-image-title.pdf');

Key Notes: #

• Replace the sample Base64 string with your actual image data (make sure it includes the correct data:image/[format];base64, prefix).
• Adjust the width, height, and margin values to match your desired layout and spacing.
• Use alignment: 'center' in the columns object if you want the image-title pair to be centered on the page.

Give these approaches a shot—they should get your image positioned right in front of your title perfectly!

内容的提问来源于stack exchange，提问作者Jeanpierre Rivas