pdf frame

www.pdf-frame.org

pdf-came

Emballer	version
pdf-frame-vue
pdf-trame-nuxt

Introduction

PDF-Frame est un framework Web JavaScript pour le rendu PDF / Canvas côté client. Avec sa syntaxe et sa sémantique HTML déclaratives, il offre un moyen facile et efficace de définir le contenu graphique PDF / Canvas. Il suit une syntaxe similaire aux SVG et fournit une prise en charge des composants pour les cadres populaires comme Vue, Nuxt et React (Work in Progress). Propulsé par I2DJS, le trame PDF prend actuellement en charge les sorties de rendu sous forme de formats PDF et Canvas.

Caractéristiques

• Syntaxe déclarative: définissez facilement le contenu graphique PDF / Canvas à l'aide d'une syntaxe claire et déclarative.
• Syntaxe et sémantique de type SVG: adopte la balise SVG et la syntaxe d'attribut familières pour définir des formes géométriques.
• Rendu cohérent: fournit la même syntaxe et la même sémantique pour rendre les sorties PDF et Canvas.
• Pagination automatique: le débordement du contenu est pris en charge par le moteur en reprenant de nouvelles pages, assurant l'intégrité et la lisibilité du document.
• Prise en charge de plusieurs pages: Créez des documents PDF de plusieurs pages de manière transparente.
• Animations et événements: moyen facile de définir les animations et les événements sur les éléments dans le contexte de la toile.
• Prise en charge des composants Framework: Vue, Nuxt.

Blogs:

• Création de PDF visuellement riches avec PDF-Frame-Vue
• Simplifier le rendu PDF en Vue avec PDF-Frame-Vue

Modèle de toile

 < 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 >

Modèle de base PDF

 < 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 >

Modèle de PDF de plusieurs pages

 < 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 > 

Contributif

Les contributions sont les bienvenues! Si vous souhaitez contribuer à PDF-Frame, veuillez suivre les directives dans contribution.md.

Licence

Ce projet est autorisé sous la licence du MIT. Voir le fichier de licence pour plus de détails.

Contact

Pour toute demande ou soutien, veuillez contacter [email protected] .