在Angular2开发环境中，有时我们需要实现PDF文档的展示功能。本文将详细介绍如何在Angular2应用中使用pdf插件，特别是ng2-pdf-viewer插件，以便于在网页上查看PDF文件。
我们需要安装两个关键的npm包：`pdfjs-dist`和`ng2-pdf-viewer`。这两个包分别用于处理PDF文件的核心库和Angular2的组件封装。在项目的根目录下，通过以下命令进行安装：
```bash
npm install pdfjs-dist --save
npm install ng2-pdf-viewer --save
```
安装完成后，我们需要在`system.config.js`文件中设置映射，确保Angular2应用能够正确加载这些库。在`map`对象中添加`ng2-pdf-viewer`和`pdfjs-dist`的路径，同时在`packages`对象中配置它们的默认扩展名：
```javascript
var map = {
// ...
'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer',
'pdfjs-dist': 'node_modules/pdfjs-dist'
};
var packages = {
// ...
'ng2-pdf-viewer': { main: 'dist/index.js', defaultExtension: 'js' },
'pdfjs-dist': { defaultExtension: 'js' }
};
```
接下来，我们需要在主配置文件`app.module.ts`中注册`ng2-pdf-viewer`组件。首先导入`PdfViewerComponent`，然后将其添加到`declarations`数组中：
```typescript
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);
```
在页面模板中，我们可以使用`<pdf-viewer>`标签来展示PDF文件。例如：
```html
<pdf-viewer
[src]="pdfSrc"
[page]="page"
[original-size]="true"
style="display: block;">
</pdf-viewer>
```
这里，`pdfSrc`应指向PDF文件的URL，`page`用于指定显示的页面。为了防止跨域问题，确保PDF文件的服务器支持CORS策略。另外，`original-size`设置为`true`表示按照PDF原始大小显示，如果需要自适应大小，可以设置为`false`。
`<pdf-viewer>`组件还提供了许多其他属性，如缩放、旋转功能，以及一系列回调函数，允许自定义交互行为。具体属性和方法可以在ng2-pdf-viewer的GitHub仓库中查看文档，或者直接在项目中探索其API。
记得在对应的`.ts`文件中定义`pdfSrc`和`page`变量，以便在组件中控制PDF的加载和显示。
总结来说，要在Angular2应用中实现PDF显示功能，我们需要安装并配置ng2-pdf-viewer插件，注册组件，然后在模板中使用`<pdf-viewer>`标签，并根据需求调整相关属性。通过这种方式，我们能够轻松地在Web应用中集成PDF阅读功能，提供用户友好的文档查看体验。如果遇到问题，可以查阅插件的官方文档或社区资源寻求解决方案。
