Angular2下使用pdf插件的方法詳解
前言
最近因?yàn)楣ぷ鞯脑?，需要在Angualr2建的項(xiàng)目里做一個(gè)pdf顯示的功能，在網(wǎng)上找了個(gè)插件，不過由于是第一次使用額外插件，在用的時(shí)候遇到了一些坑，這里權(quán)且記一下使用的步驟，方便以后的參考。
安裝
這里需要安裝兩個(gè)包：pdfjs-dist和ng2-pdf-viewer，安裝時(shí)是要順便保存到package.json里的，因此在項(xiàng)目根目錄下輸入下面命令：
npm install pdfjs-dist --save npm install ng2-pdf-viewer --save
于此同時(shí)，我們還要在system.config.js里添加映射，否則會(huì)加載不到這個(gè)插件。我們需要添加兩個(gè)地方，首先是要添加在其中的map變量下：
var map = {
......
'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer',
'pdfjs-dist': 'node_modules/pdfjs-dist'
}
然后還要添加在packages變量下：
var packages = {
'ng2-pdf-viewer': { main: 'dist/index.js', defaultExtension: 'js' },
'pdfjs-dist': { defaultExtension: 'js' }
}
這樣我們才能正確的引用這個(gè)包。
注冊主配置文件
要使用他，我們還要在app.module.ts文件里注冊這個(gè)包，才能在其他文件里使用，一個(gè)最簡單的配置如下：
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);
注意：要import，然后在@NgModule里的declarations里注冊即可。
頁面配置
在模板頁面中，只要在適當(dāng)?shù)奈恢锰砑宇愃葡旅娴臉?biāo)簽：
<pdf-viewer [src]="pdfSrc" [ page ]="page" [original-size]="true" style="display: block;"> </pdf-viewer>
然后在.ts文件里定義pdfSrc以及page變量，即可控制顯示的文件路徑以及頁數(shù)。
這里需要注意的是：文件源如果是跨域的話是會(huì)報(bào)一個(gè)error的，而且這里的page是豎排顯示的而不是帶滾輪的顯示，因此這實(shí)際上顯示的是一張一張的圖片。
當(dāng)然，pdf-viewer還有很多其他的屬性，比如支持縮放，旋轉(zhuǎn)，以及提供了一系列相關(guān)的回調(diào)函數(shù)，具體的可以在github里找到，當(dāng)然大家也可以通過本地下載。
樣例
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Angular JS 生成動(dòng)態(tài)二維碼的方法
這篇文章主要介紹了Angular JS 生成動(dòng)態(tài)二維碼的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請求方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳解Angular系列之變化檢測(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(Change Detection)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能
本文通過實(shí)例代碼給大家介紹了Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
本文主要介紹AngularJS ng-class 指令,這里幫大家整理了ng-class資料和示例代碼,學(xué)習(xí)AngularJS指令的同學(xué)可以參考下2016-08-08
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
本文通過示例向大家介紹了AngularJS語法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。2015-01-01
Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03