pdf frame 다운로드 -PDF pdf frame 소스 코드 다운로드

pdf frame

웹사이트 데이터

v2.2.0

다운로드

www.pdf-frame.org

PDF- 프레임

패키지	버전
PDF- 프레임 vue
PDF- 프레임-렉스

소개

PDF- 프레임은 클라이언트 측 선언적 HTML 구문 및 의미론을 통해 PDF/Canvas 그래픽 컨텐츠를 정의하는 쉽고 효율적인 방법을 제공합니다. SVG와 유사한 구문을 따르고 VUE, NUXT 및 React (진행중인 작업)와 같은 인기있는 프레임 워크에 대한 구성 요소 지원을 제공합니다. I2DJ로 구동되는 PDF- 프레임은 현재 PDF 및 Canvas 형식으로 렌더링 출력을 지원합니다.

특징

선언 구문 : 명확하고 선언적인 구문을 사용하여 PDF/CANVAS 그래픽 컨텐츠를 쉽게 정의합니다.
SVG와 같은 구문 및 시맨틱 : 기하학적 형태를 정의하기위한 친숙한 SVG 태그 및 속성 구문을 채택합니다.
일관된 렌더링 : PDF 및 캔버스 출력을 모두 렌더링하기위한 동일한 구문 및 의미론을 제공합니다.
Auto Pagination : 컨텐츠 오버 플로우는 새로운 페이지를 생성하여 문서의 무결성과 가독성을 보장하여 엔진에 의해 처리됩니다.
멀티 페이지 지원 : 멀티 페이지 PDF 문서를 원활하게 만듭니다.
애니메이션 및 이벤트 : 캔버스 컨텍스트의 요소에서 애니메이션과 이벤트를 쉽게 정의하는 방법.
프레임 워크 구성 요소 지원 : vue, nuxt.

블로그 :

PDF- 프레임 뷰로 시각적으로 풍부한 PDF를 만듭니다
PDF- 프레임 vue로 VUE에서 PDF 렌더링을 단순화합니다

캔버스 템플릿

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