الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

عارض PDF الزاوي

مكون عارض PDF لـ Angular 5+

الصفحة التجريبية

https://vadimdez.github.io/ng2-pdf-viewer/

مثال StackBlitz

https://stackblitz.com/edit/ng2-pdf-viewer

منشور المدونة

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

ملخص

  • ثَبَّتَ
  • الاستخدام
  • خيارات
  • عرض ملف PDF المحلي
  • اضبط طريق مخصص للعامل
  • ابحث في PDF
  • يساهم

ثَبَّتَ

Angular> = 12 

 npm install ng2-pdf-viewer

حزم مكتبة Ivy جزئية.

Angular> = 4 

 npm install ng2-pdf-viewer@^7.0.0

الزاوي <4 

 npm install ng2-pdf-viewer@~3.0.8

الاستخدام

في حال كنت تستخدم systemjs انظر التكوين هنا.

أضف PdfViewerModule إلى imports الوحدة النمطية الخاصة بك 

 import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { AppComponent } from './app/app.component' ;

import { PdfViewerModule } from 'ng2-pdf-viewer' ;

@ NgModule ( {
  imports : [ BrowserModule , PdfViewerModule ] ,
  declarations : [ AppComponent ] ,
  bootstrap : [ AppComponent ]
} )

class AppModule { }

platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ;

ثم استخدمه في المكون الخاص بك 

 import { Component } from '@angular/core' ;

@ Component ( {
  selector : 'example-app' ,
  template : `
  <pdf-viewer [src]="pdfSrc"
              [render-text]="true"
              [original-size]="false"
              style="width: 400px; height: 500px"
  ></pdf-viewer>
  `
} )
export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf" ;
}

خيارات

  • [SRC]
  • [(صفحة)]
  • [عصا إلى صفحة]
  • [ثنائي الرابط الخارجي]
  • [النص النص]
  • [وضع النص النصي]
  • [تناوب]
  • [تكبير]
  • [مقياس التكبير]
  • [الحجم الأصلي]
  • [مناسبة إلى صفحة]
  • [عرض للجميع]
  • [التلقائي]
  • [C-Maps-url]
  • [حدود العرض]
  • (مكتمل بعد التحميل)
  • (تم تقديم الصفحة)
  • (تم تقديم طبقة نصية)
  • (خطأ)
  • (

[SRC]

ملكية يكتب مطلوب
[SRC] سلسلة ، كائن ، uint8array مطلوب

تمرير موقع PDF 

 [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"

لمزيد من التحكم ، يمكنك تمرير كائن الخيارات إلى [src] . انظر سمات أخرى للكائن هنا.

سيكون كائن الخيارات لتحميل PDF المحمي: 

 {
 url : 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' ,
 withCredentials : true
}

[صفحة]

ملكية يكتب مطلوب
[صفحة] أو [(صفحة)] رقم مطلوب مع [show-all] = "false" أو اختياري مع [show-all] = "true"

رقم الصفحة 

 [page]="1"

يدعم ربط البيانات ثنائية الاتجاه أيضًا 

 [(page)]="pageVariable"

إذا كنت تريد أن يقوم two way data binding بتحديث متغير page في الصفحة/التمرير - يجب أن تتأكد من تحديد ارتفاع الحاوية ، على سبيل المثال: 

 pdf-viewer {
    height : 100 vh ;
}

[عصا إلى صفحة]

ملكية يكتب مطلوب
[عصا إلى صفحة] منطقية خياري

عرض العصي إلى الصفحة. يعمل مع [show-all]="true" page . 

 [stick-to-page]="true"

[النص النص]

ملكية يكتب مطلوب
[النص النص] منطقية خياري

تمكين تقديم النص ، يسمح بتحديد النص 

 [render-text]="true"

[وضع النص النصي]

ملكية يكتب مطلوب
[وضع النص النصي] RenderTextMode خياري

تستخدم في تركيبة مع [render-text]="true"

عناصر التحكم إذا تم تمكين طبقة النص ، ووضع التحديد المستخدم.

0 = RenderTextMode.DISABLED - قم بتعطيل طبقة تحديد النص

1 = RenderTextMode.ENABLED - يتيح طبقة تحديد النص

2 = RenderTextMode.ENHANCED - يتيح تحديد النص المحسّن 

 [render-text-mode]="1"

[ثنائي الرابط الخارجي]

ملكية يكتب مطلوب
[ثنائي الرابط الخارجي] خيط خياري

تستخدم في تركيبة مع [render-text]="true"

الهدف الرابط

  • blank
  • none
  • self
  • parent
  • top
 [external-link-target]="'blank'"

[تناوب]

ملكية يكتب مطلوب
[تناوب] رقم خياري

تدوير PDF

الخطوة المسموح بها هي 90 درجة ، على سبيل المثال. 0 ، 90 ، 180 

 [rotation]="90"

[تكبير]

ملكية يكتب مطلوب
[تكبير] رقم خياري

تكبير PDF 

 [zoom]="0.5"

[مقياس التكبير]

ملكية يكتب مطلوب
[مقياس التكبير] "عرض الصفحة" | خياري

يحدد كيفية حساب مقياس التكبير عندما [original-size]="false" ، بشكل افتراضي تم تعيينه على "عرض الصفحة".

  • "عرض الصفحة" مع تكبير 1 سيعرض عرض الصفحة الذي يأخذ كل المساحة الأفقية الممكنة في الحاوية

  • "ارتفاع الصفحة" مع تكبير 1 سيعرض ارتفاع الصفحة الذي يأخذ كل المساحة الرأسية الممكنة في الحاوية

  • ستعرض "مناسبة الصفحة" مع تكبير 1 صفحة يتم تحجيمها إلى العرض أو الارتفاع لتناسبها تمامًا في الحاوية 

 [zoom-scale]="'page-width'"

[الحجم الأصلي]

ملكية يكتب مطلوب
[الحجم الأصلي] منطقية خياري
  • إذا تم ضبط الحجم الحقيقي - سيكون الحجم مثل المستند الأصلي
  • إذا تم ضبطه على خطأ - سيكون الحجم مثل كتلة الحاوية 
 [original-size]="true"

[مناسبة إلى صفحة]

ملكية يكتب مطلوب
[مناسبة إلى صفحة] منطقية خياري

يعمل مع [original-size]="true" . يمكنك عرض المستند الخاص بك بالحجم الأصلي ، والتأكد من أنه ليس أكبر ثم كتلة الحاويات. 

 [fit-to-page]="false"

[عرض للجميع]

ملكية يكتب مطلوب
[عرض للجميع] منطقية خياري

أظهر صفحات واحدة أو جميع الصفحات تمامًا 

 [show-all]="true"

[التلقائي]

ملكية يكتب مطلوب
[التلقائي] منطقية خياري

قم بتشغيل أو إيقاف تغيير الحجم التلقائي.

! من المهم جعل العمل [autoresize] -تأكد من أن [original-size]="false" وعلامة pdf-viewer قد تم max-width أو display . 

 [autoresize]="true"

[C-Maps-url]

ملكية يكتب مطلوب
[C-Maps-url] خيط خياري

عنوان URL لخرائط مصدر الأحرف غير اللاتينية. 

 [c-maps-url]="'assets/cmaps/'"

عنوان URL الافتراضي هو: https://unpkg.com/[email protected]/cmaps/

لخدمة CMAPs بمفردك ، تحتاج إلى نسخ node_modules/pdfjs-dist/cmaps assets/cmaps .

[حدود العرض]

ملكية يكتب مطلوب
[حدود العرض] منطقية خياري

إظهار حدود الصفحة 

 [show-borders]="true"

(مكتمل بعد التحميل)

ملكية يكتب مطلوب
(مكتمل بعد التحميل) أتصل مرة أخرى خياري

احصل على معلومات PDF باستخدام رد الاتصال

أولاً ، حدد وظيفة رد الاتصال "Callbackfn" في وحدة التحكم الخاصة بك ، 

 callBackFn ( pdf : PDFDocumentProxy ) {
   // do anything with "pdf"
}

ثم استخدمه في القالب الخاص بك: 

 (after-load-complete)="callBackFn($event)"

(تم تقديم الصفحة)

ملكية يكتب مطلوب
(تم تقديم الصفحة) أتصل مرة أخرى خياري

احصل على حدث عند تقديم الصفحة. دعا لكل صفحة المقدمة.

حدد رد الاتصال في المكون الخاص بك: 

 pageRendered ( e : CustomEvent ) {
  console . log ( '(page-rendered)' , e ) ;
}

ثم ربطه بـ <pdf-viewer> : 

 (page-rendered)="pageRendered($event)"

(الصفحات المتصلة)

ملكية يكتب مطلوب
(الصفحات المتصلة) أتصل مرة أخرى خياري

احصل على حدث عند تهيئة الصفحات.

حدد رد الاتصال في المكون الخاص بك: 

 pageInitialized ( e : CustomEvent ) {
  console . log ( '(pages-initialized)' , e ) ;
}

ثم ربطه بـ <pdf-viewer> : 

 (pages-initialized)="pageInitialized($event)"

(تم تقديم طبقة نصية)

ملكية يكتب مطلوب
(تم تقديم طبقة نصية) أتصل مرة أخرى خياري

احصل على حدث عند تقديم طبقة نصية.

حدد رد الاتصال في المكون الخاص بك: 

 textLayerRendered ( e : CustomEvent ) {
  console . log ( '(text-layer-rendered)' , e ) ;
}

ثم ربطه بـ <pdf-viewer> : 

 (text-layer-rendered)="textLayerRendered($event)"

(خطأ)

ملكية يكتب مطلوب
(خطأ) أتصل مرة أخرى خياري

خطأ معالجة رد الاتصال

حدد رد الاتصال في فصل المكون الخاص بك 

 onError ( error : any ) {
  // do anything
}

ثم أضفه إلى pdf-component في قالب المكون 

(error)="onError($event)"

(

ملكية يكتب مطلوب
( أتصل مرة أخرى خياري

تحميل رد اتصال التقدم - يوفر معلومات التقدم total والبايتات loaded . يسمى عدة مرات خلال مرحلة تحميل PDF.

حدد رد الاتصال في فصل المكون الخاص بك 

 onProgress ( progressData : PDFProgressData ) {
  // do anything with progress data. For example progress indicator
}

ثم أضفه إلى pdf-component في قالب المكون 

(on-progress)="onProgress($event)"

عرض ملف PDF المحلي

في قالب html الخاص بك إضافة input : 

 < input (change) =" onFileSelected() " type =" file " id =" file " >

ثم أضف طريقة onFileSelected إلى المكون الخاص بك: 

 onFileSelected ( ) {
  let $img : any = document . querySelector ( '#file' ) ;

  if ( typeof ( FileReader ) !== 'undefined' ) {
    let reader = new FileReader ( ) ;

    reader . onload = ( e : any ) => {
      this . pdfSrc = e . target . result ;
    } ;

    reader . readAsArrayBuffer ( $img . files [ 0 ] ) ;
  }
}

اضبط طريق مخصص للعامل

بشكل افتراضي ، يتم تحميل worker من cdn.jsdelivr.net .

في path تحديث الكود الخاص بك إلى العامل ليكون على سبيل المثال /pdf.worker.mjs 

 ( window as any ) . pdfWorkerSrc = '/pdf.worker.mjs' ;

يجب تعيين هذا قبل تقديم مكون pdf-viewer .

إذا كان لديك حالة حافة (نادرة للغاية) من أي وقت مضى حيث تقوم بتشغيل بيئة يتم تحميل مكونات متعددة بطريقة ما داخل صفحة الويب نفسها ، وتشارك النافذة نفسها ، ولكن باستخدام إصدارات مختلفة من PDF.Worker ، تمت إضافة الدعم. يمكنك القيام بما سبق ، باستثناء أنه يمكنك إلحاق الإصدار المحدد من PDFJs المطلوب وتجاوز المسار المخصص لهذا الإصدار فقط . وبهذه الطريقة ، لن يتعارض ضبط النافذة العالمية VAR. 

 ( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ;

ابحث في PDF

استخدم eventBus لوظيفة البحث.

في ملف TS الخاص بالمكون:

  • أضف إشارة إلى مكون pdf-viewer ،
  • ثم عند الحاجة ، قم بتنفيذ search() مثل هذا: 
@ ViewChild ( PdfViewerComponent ) private pdfComponent: PdfViewerComponent ;

search ( stringToSearch : string ) {
  this . pdfComponent . eventBus . dispatch ( 'find' , {
    query : stringToSearch , type : 'again' , caseSensitive : false , findPrevious : undefined , highlightAll : true , phraseSearch : true
  } ) ;
}

يساهم

انظر المساهمة

هبة

إذا كان هذا المشروع يساعدك على تقليل الوقت للتطوير ، فيمكنك أن تعطيني كوبًا من الشاي :)

رخصة

MIT © VADYM YATSYUK

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