ดาวน์โหลด pdf frame - ดาวน์โหลดซอร์สโค้ด pdf frame

pdf frame

ข้อมูลเว็บไซต์

v2.2.0

ดาวน์โหลด

www.pdf-frame.org

เฟรม PDF

บรรจุุภัณฑ์	รุ่น
pdf-frame-vue
pdf-frame-nuxt

การแนะนำ

PDF-FRAME เป็น JavaScript Web Framework สำหรับการแสดงผล PDF/Canvas ฝั่งไคลเอ็นต์ ด้วยไวยากรณ์ HTML ที่ประกาศและความหมายมันมีวิธีที่ง่ายและมีประสิทธิภาพในการกำหนดเนื้อหากราฟิก PDF/Canvas มันเป็นไปตามไวยากรณ์คล้ายกับ SVG's และให้การสนับสนุนส่วนประกอบสำหรับเฟรมเวิร์กยอดนิยมเช่น Vue, Nuxt และ React (ทำงานระหว่างดำเนินการ) ขับเคลื่อนโดย I2DJS ปัจจุบัน PDF-FRAME รองรับผลลัพธ์การแสดงผลเป็นรูปแบบ PDF และ Canvas

คุณสมบัติ

ไวยากรณ์ที่ประกาศ: กำหนดเนื้อหากราฟิก PDF/Canvas ได้อย่างง่ายดายโดยใช้ไวยากรณ์ที่ชัดเจนและประกาศ
ไวยากรณ์และความหมายคล้าย SVG: ใช้แท็ก SVG ที่คุ้นเคยและไวยากรณ์แอตทริบิวต์สำหรับการกำหนดรูปทรงเรขาคณิต
การเรนเดอร์ที่สอดคล้องกัน: ให้ไวยากรณ์และความหมายเดียวกันสำหรับการแสดงผลทั้งเอาต์พุต PDF และ Canvas
การแบ่งหน้าอัตโนมัติ: การล้นเนื้อหาได้รับการดูแลโดยเครื่องยนต์โดยวางไข่หน้าใหม่ทำให้มั่นใจได้ถึงความสมบูรณ์และความสามารถในการอ่านของเอกสาร
การสนับสนุนหลายหน้า: สร้างเอกสาร 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 >