ng PDF Integration #5378

4 Answer(s)

• 

  0

  maharatha created 5 years ago

  I guess the basic question is where should I import an external component so that I can use it. If you can explain how to work with the below that would be of great help :

  <a class="postlink" href="https://github.com/VadimDez/ng2-pdf-viewer">https://github.com/VadimDez/ng2-pdf-viewer</a>

  I am kind of stuck here, please help.

  Save Cancel
• 

  0

  alirizaadiyahsi created 5 years ago

  Could you explain a bit more?

  What steps did you follow and show some code?

  Save Cancel
• 

  0

  maharatha created 5 years ago

  Code Below :

  in app.module.ts :

  1. npm install ng2-pdf-viewer --save

  2. Then added the code to app.module.ts

  import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
  import { PdfViewerModule } from 'ng2-pdf-viewer';
  

  imports: [
          ngCommon.CommonModule,
          FormsModule,
          HttpModule,
          JsonpModule,
          ModalModule.forRoot(),
          TooltipModule.forRoot(),
          TabsModule.forRoot(),
          FileUploadModule,
          AbpModule,
          AppRoutingModule,
          UtilsModule,
          AppCommonModule.forRoot(),
          ServiceProxyModule,
          TableModule,
          PaginatorModule,
          PrimeNgFileUploadModule,
          ProgressBarModule,
          PdfViewerModule
      ],
  

  Then added the component under Main folder in the subfolder : document :

  import { Component, Injector, ViewEncapsulation, ViewChild } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Http } from '@angular/http';
  import { NotifyService } from '@abp/notify/notify.service';
  import { AppComponentBase } from '@shared/common/app-component-base';
  import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
  import { appModuleAnimation } from '@shared/animations/routerTransition';
  import { Table } from 'primeng/components/table/table';
  import { Paginator } from 'primeng/components/paginator/paginator';
  import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
  import { FileDownloadService } from '@shared/utils/file-download.service';
  import * as moment from 'moment';
  
  @Component({
      selector: 'example-app',
      template: `
    <div>
        <label>PDF src</label>
        <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
    </div>
    <pdf-viewer [src]="pdfSrc" 
                [render-text]="true"
                style="display: block;"
    ></pdf-viewer>
    `
  })
  
  export class PdfviewerComponent  {
      pdfSrc: string = '/pdf-test.pdf';
  }
  

  3. Made changes to main.module.ts :

  import { PdfviewerComponent } from './document/pdf-viewer.component'
  

  declarations: [
          DashboardComponent,
          PdfviewerComponent
      ]
  

  4. Made changes to the routing : main.routing.module.ts

  import { PdfviewerComponent } from './document/pdf-viewer.component'
  

  @NgModule({
      imports: [
          RouterModule.forChild([
              {
                  path: '',
                  children: [
                      { path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } },
                      { path: 'document', component: PdfviewerComponent, data: { permission: 'Pages.Tenant.Dashboard' } },
                  ]
              }
          ])
      ],
      exports: [
          RouterModule
      ]
  })
  

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  Try to add PdfViewerModule to root module's imports;

  imports: [BrowserModule, PdfViewerModule],
  

  Save Cancel