For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any docs URL. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0Sponsor

PDF Image

Embedded image with fit options.

Takumi Forme
Rendering PDF…

Installation

$ pnpm dlx shadcn@latest add @angular-pdfcn/takumi/pdf-image

Usage

import { Component } from "@angular/core";

import { PREVIEW_IMAGE_DATA_URI } from "@/examples/preview-assets";
import { PdfImage } from "@/components/pdf/pdf-image/pdf-image";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import {
  TakumiDocument,
  TakumiPage,
} from "@/lib/pdf-primitives";

@Component({
  imports: [TakumiDocument, TakumiPage, PdfcnThemeProvider, PdfImage],
  template: `
    <takumi-document>
      <takumi-page size="A4">
        <pdf-theme-provider>
          <pdf-image
            [src]="src"
            variant="default"
            [height]="120"
            [width]="200"
            caption="Variant: default"
          />
        </pdf-theme-provider>
      </takumi-page>
    </takumi-document>
  `,
})
export class PdfImageDemo {
  protected readonly src = PREVIEW_IMAGE_DATA_URI;
}

API Reference

PdfImage

Input Type Default
src string | { uri: string; method?: string; headers?: Record<string, string>; body?: string } -
variant 'default' | 'full-width' | 'thumbnail' | 'avatar' | 'cover' | 'bordered' | 'rounded' 'default'
width number | string -
height number | string -
fit 'cover' | 'contain' | 'fill' | 'none' -
position string '50% 50%'
caption string -
aspectRatio number -
borderRadius number -
noWrap boolean true
style Style -