Methods of using PDF plugins under Angular2


recently because of work needs to be done features a pdf displayed in Angualr2 construction project, the Internet looking for a plug-in, but because it is the first once the use of additional plug-ins, encountered some pit at the time of use, for the time being in mind here about the steps used to facilitate future reference.


Here need to install two packages: pdfjs-dist and ng2-pdf-viewer when installation is to save the way to package.json where, the input items in the root directory of the following commands:

  npm install pdfjs-dist --savenpm install ng2-pdf-viewer --save  

at the same time, we would also like to add mapping system.config.js, otherwise this will not load plug-ins. We need to add two places, first to add the map in which the variables:

  var map = {...... 'ng2-pdf-viewer' : 'node_modules / ng2-pdf-viewer', 'pdfjs-dist': 'node_modules / pdfjs-dist'}  

was then also added at variable packages:

  var packages = { 'ng2-pdf-viewer': {main: 'dist / index.js', defaultExtension: 'js'}, 'pdfjs-dist': {defaultExteNsion: 'JS'}}  
We can reference this package correctly.

We must register this package in app.module.ts file, Can be used in other files, one of the simplest configurations is as follows:

Import {ngmodule} from ‘@ angular / core’; import {browsermodule} from ‘@ Angular / platform-browser ‘; import {AppComponent} from’ ./app/app.component’;import {PdfViewerComponent} from ‘ng2-pdf-viewer’; @ NgModule ({imports: [BrowserModule], declarations: [AppComponent, PdfViewerComponent] , Bootstrap: [AppComponent]}) Class AppModule {} PlatformBrowserDynamic (). BootstrapModule (AppModule);
  Note:  To Import, then @ @ @ @ @ 12 要The declarations in Ngmodule is registered. 

In the template page, as long as the following label is added in the appropriate position:

Then define the PDFSRC and PAGE variables in the .TS file, you can control the displayed file path and the number of pages.
  The data is to be noted here:  File source If it is a cross-domain, it will report an error, and the Page here is displayed rather than the display of the roller. Therefore, this actually shows a picture of a picture.   Of course, PDF-Viewer has many other properties, such as support scaling, rotation, and providing a series of related callback functions, which can be found in Github, of course, everyone can download. 


The above is this article All of the content, I hope this paper will bring a certain help to everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment