pdf frame

www.pdf-frame.org

PDF-карта

Упаковка	версия
PDF-Frame-Vue
PDF-Frame-Nuxt

Введение

PDF-Frame-это веб-фреймворк JavaScript для клиентского PDF/Canvas рендеринг. Благодаря декларативному HTML -синтаксису и семантике, он предлагает простой и эффективный способ определения графического содержания PDF/Canvas. Он следует за синтаксисом, аналогичным SVG и обеспечивает поддержку компонентов для популярных рамок, таких как Vue, Nuxt и React (работа в процессе). В настоящее время PDF-Frame, работающий от I2DJS, поддерживает выходы в виде форматов PDF и холста.

Функции

• Декларативный синтаксис: легко определить графический контент PDF/Canvas с использованием прозрачного и декларативного синтаксиса.
• SVG-подобный синтаксис и семантика: принимает знакомый синтаксис Tag и атрибута SVG для определения геометрических форм.
• Последовательный рендеринг: обеспечивает один и тот же синтаксис и семантику для рендеринга как PDF, так и холста.
• Автоавнизация: переполнение контента позаботится двигателем, создавая новые страницы, обеспечивая целостность и читаемость документа.
• Многостраничная поддержка: создайте многостраничные документы PDF без плавного.
• Анимации и события: простой способ определить анимации и события в элементах в контексте холста.
• Поддержка компонента структуры: Vue, Nuxt.

Блоги:

• Создание визуально богатых PDF с PDF-Frame-Vue
• Упрощение PDF-рендеринг в VUE с PDF-Frame-Vue

Шаблон холста

 < 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 Базовый шаблон

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

Многостраничный шаблон PDF

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

Внося

Взносы приветствуются! Если вы хотите внести свой вклад в PDF-раму, пожалуйста, следуйте руководящим принципам в ancom.md.

Лицензия

Этот проект лицензирован по лицензии MIT. Смотрите файл лицензии для получения более подробной информации.

Контакт

Для любых запросов или поддержки, пожалуйста, свяжитесь с [email protected] .