pdf frame下載pdf frame源代碼下載

pdf frame

網站數據

v2.2.0

下載

www.pdf-frame.org

PDF框架

包裹	版本
PDF框架票
pdf-frame-nuxt

介紹

PDF-Frame是客戶端PDF/Canvas渲染的JavaScript Web框架。憑藉其聲明的HTML語法和語義，它提供了一種簡單有效的方法來定義PDF/Canvas圖形內容。它遵循類似於SVG的語法，並為Vue，Nuxt和React（正在進行的工作）等流行框架提供了組件支持。 PDF框架由I2DJ提供支持，目前支持將輸出作為PDF和帆布格式。

特徵

聲明語法：使用清晰和聲明的語法輕鬆定義PDF/Canvas圖形內容。
類似SVG的語法和語義：採用熟悉的SVG標籤和屬性語法來定義幾何形狀。
一致的渲染：提供相同的語法和語義來渲染PDF和帆布輸出。
自動分頁：發動機覆蓋新頁面，確保文檔的完整性和可讀性來照顧內容溢出。
多頁支持：無縫創建多頁PDF文檔。
動畫與事件：在畫布上下文中定義動畫和事件的簡便方法。
框架組件支持：vue，nuxt。

部落格:

用PDF框架創建視覺上豐富的PDF
用PDF框架簡化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 >