pdf frame

www.pdfframe.org

marco de pdf

Paquete	versión
PDF-Frame-Vue
pdf-marco-nuxt

Introducción

PDF-Frame es un marco web JavaScript para la representación PDF/lienzo del lado del cliente. Con su declarante sintaxis y semántica HTML, ofrece una forma fácil y eficiente de definir contenido gráfico PDF/Canvas. Sigue la sintaxis similar a SVG y proporciona soporte de componentes para marcos populares como Vue, Nuxt y React (trabajo en progreso). Impulsado por I2DJS, el marco PDF actualmente admite la representación de salidas como formatos PDF y lienzo.

Características

• Sintaxis declarativa: definir fácilmente el contenido gráfico PDF/lienzo utilizando una sintaxis clara y declarativa.
• Sintaxis y semántica similar a SVG: adopta la etiqueta SVG familiar y la sintaxis de atributos para definir formas geométricas.
• Representación consistente: proporciona la misma sintaxis y semántica para representar salidas PDF y lienzo.
• Paginación automática: el motor se cuida el desbordamiento del contenido al generar nuevas páginas, asegurando la integridad y legibilidad del documento.
• Soporte de varias páginas: cree documentos PDF de varias páginas sin problemas.
• Animaciones y eventos: manera fácil de definir las animaciones y eventos en elementos en el contexto de lienzo.
• Soporte de componentes marco: Vue, Nuxt.

Blogs:

• Creación de PDF visualmente ricos con PDF-Frame-Vue
• Simplificando la representación de PDF en Vue con PDF-Frame-Vue

Plantilla de lienzo

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

Plantilla básica en 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 >

Plantilla PDF de varias páginas

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

Que contribuye

¡Las contribuciones son bienvenidas! Si desea contribuir al marco PDF, siga las pautas en contribuyente.

Licencia

Este proyecto tiene licencia bajo la licencia MIT. Consulte el archivo de licencia para obtener más detalles.

Contacto

Para cualquier consulta o soporte, comuníquese con [email protected] .