الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

www.pdf-rame.org

PDF-Frame

طَرد إصدار
PDF-Frame-Vue
PDF-Frame-Nuxt

مقدمة

PDF-Frame هو إطار ويب JavaScript لتقديم PDF/Canvas من جانب العميل. من خلال بناء جملة HTML والدلالات ، يوفر طريقة سهلة وفعالة لتحديد محتوى PDF/Canvas الرسومي. يتبع بناء الجملة على غرار SVG ويوفر دعم المكون للأطر الشعبية مثل 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 >

المساهمة

المساهمات مرحب بها! إذا كنت ترغب في المساهمة في PDF-Frame ، فيرجى اتباع الإرشادات في المساهمة.

رخصة

هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص لمزيد من التفاصيل.

اتصال

للحصول على أي استفسارات أو دعم ، يرجى الاتصال بـ [email protected] .

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل