pdf frame -Download - pdf frame Source Code Download

pdf frame

Website-Daten

v2.2.0

Herunterladen

www.pdf-frame.org

PDF-Frame

Paket	Version
PDF-Frame-Vue
PDF-Frame-Nuxt

Einführung

PDF-Frame ist ein JavaScript-Web-Framework für das clientseitige PDF/Canvas-Rendering. Mit seiner deklarativen HTML -Syntax und der Semantik bietet es eine einfache und effiziente Möglichkeit, den grafischen Inhalt von PDF/Canvas zu definieren. Es folgt Syntax ähnlich wie SVGs und bietet Komponentenunterstützung für beliebte Frameworks wie Vue, Nuxt und React (Arbeit in Arbeit). PDF-Frame von I2DJs unterstützt derzeit die Render-Ausgänge als PDF- und Leinwandformate.

Merkmale

Deklarative Syntax: Die grafische PDF/Canvas -Inhalte mit einer klaren und deklarativen Syntax einfach definieren.
SVG-ähnliche Syntax und Semantik: Übernimmt die vertraute SVG-Tag- und Attributsyntax zur Definition geometrischer Formen.
Konsistente Rendering: Bietet die gleiche Syntax und Semantik, um sowohl PDF- als auch Canvas -Ausgänge zu rendern.
Auto -Pagination: Der Inhaltsüberlauf wird von der Engine durch Laichen neuer Seiten gepflegt, um die Integrität und Lesbarkeit des Dokuments zu gewährleisten.
Mehrseitige Unterstützung: Erstellen Sie mehrseitige PDF-Dokumente nahtlos.
Animationen und Ereignisse: Einfacher Weg, um die Animationen und Ereignisse in Elementen im Canvas -Kontext zu definieren.
Unterstützung von Framework -Komponenten: Vue, Nuxt.

Blogs:

Erstellen visuell reichhaltiger PDFs mit PDF-Frame-Vue-Vue
Vereinfachung des PDF-Renderings im VUE mit PDF-Frame-Vue-Vue

Leinwandvorlage

 < pdfFrame type =" canvas " width =" 595 " height =" 841 " >
  < i-g :transform =" { translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] } " >
    < i-text :x =" 30 " :y =" 60 " :text =" 'Page 1 Title' " :width =" 530 " :style =" {font: '25px Arial', align: 'center'} " > </ i-text >
    < i-rect :x =" 30 " :y =" 100 " :width =" 535 " :height =" 700 " :style =" { fillStyle:'#f0f0f0' } " > </ i-rect >
    < i-image src =" src/assets/i2d-frame.svg " :width =" 200 " :x =" 175 " :y =" 100 " > </ i-image >
  </ i-g >
</ pdfFrame >

PDF -Grundvorlage

 < pdfFrame type =" pdf " width =" 595 " height =" 841 " >
  < i-g :transform =" { translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] } " >
    < i-text :x =" 30 " :y =" 60 " :text =" 'Page 1 Title' " :width =" 530 " :style =" {font: '25px Arial', align: 'center'} " > </ i-text >
    < i-rect :x =" 30 " :y =" 100 " :width =" 535 " :height =" 700 " :style =" { fillStyle:'#f0f0f0' } " > </ i-rect >
    < i-image src =" src/assets/i2d-frame.svg " :width =" 200 " :x =" 175 " :y =" 100 " > </ i-image >
  </ i-g >
</ pdfFrame >

Mehrseitige PDF-Vorlage

 < pdfFrame type =" pdf " width =" 595 " height =" 841 " >
    <!-- Page Templates -->
    < i-page-template id =" temp-1 " >
        < i-rect :x =" 0 " :y =" 0 " :width =" 595 " :height =" 841 " :style =" { fillStyle:'#ffffff' } " > </ i-rect >
        < i-text :x =" 30 " :y =" 30 " :text =" 'Header Text' " :width =" 530 " :style =" {font: '15px Arial'} " > </ i-text >
        < i-text :x =" 30 " :y =" 810 " :text =" 'Footer Text' " :width =" 530 " :style =" {font: '15px Arial'} " > </ i-text >
    </ i-page-template >
    <!-- Page 1 -->
    < i-page p-template =" temp-1 " >
      < i-g :transform =" { translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] } " >
          < i-text :x =" 30 " :y =" 60 " :text =" 'Page 1 Title' " :width =" 530 " :style =" {font: '25px Arial', align: 'center'} " > </ i-text >
          < i-rect :x =" 30 " :y =" 100 " :width =" 535 " :height =" 700 " :style =" { fillStyle:'#f0f0f0' } " > </ i-rect >
      </ i-g >
    </ i-page >
    
    <!-- Page 2 -->
    < i-page p-template =" temp-1 " >
        < i-text :x =" 30 " :y =" 60 " :text =" 'Page 2 Title' " :width =" 530 " :style =" {font: '25px Arial', align: 'center'} " > </ i-text >
        < i-image src =" src/assets/i2d-frame.svg " :width =" 200 " :x =" 175 " :y =" 100 " > </ i-image >
    </ i-page > 
</ pdfFrame >