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 >