Angular2下使用pdf插件的方法詳解
前言
最近因為工作的原因，需要在Angualr2建的項目里做一個pdf顯示的功能，在網(wǎng)上找了個插件，不過由于是第一次使用額外插件，在用的時候遇到了一些坑，這里權且記一下使用的步驟，方便以后的參考。
安裝
這里需要安裝兩個包：pdfjs-dist和ng2-pdf-viewer，安裝時是要順便保存到package.json里的，因此在項目根目錄下輸入下面命令：
npm install pdfjs-dist --save npm install ng2-pdf-viewer --save
于此同時，我們還要在system.config.js里添加映射，否則會加載不到這個插件。我們需要添加兩個地方，首先是要添加在其中的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' }
}
這樣我們才能正確的引用這個包。
注冊主配置文件
要使用他，我們還要在app.module.ts文件里注冊這個包，才能在其他文件里使用，一個最簡單的配置如下：
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里注冊即可。
頁面配置
在模板頁面中，只要在適當?shù)奈恢锰砑宇愃葡旅娴臉撕灒?/p>
<pdf-viewer [src]="pdfSrc" [ page ]="page" [original-size]="true" style="display: block;"> </pdf-viewer>
然后在.ts文件里定義pdfSrc以及page變量，即可控制顯示的文件路徑以及頁數(shù)。
這里需要注意的是：文件源如果是跨域的話是會報一個error的，而且這里的page是豎排顯示的而不是帶滾輪的顯示，因此這實際上顯示的是一張一張的圖片。
當然，pdf-viewer還有很多其他的屬性，比如支持縮放，旋轉，以及提供了一系列相關的回調(diào)函數(shù)，具體的可以在github里找到，當然大家也可以通過本地下載。
樣例
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了淺談Angular6的服務和依賴注入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了AngularJS 事件發(fā)布機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
詳解基于Bootstrap+angular的一個豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個豆瓣電影app ，非常具有實用價值，需要的朋友可以參考下2017-06-06
詳解AngularJs中$resource和restfu服務端數(shù)據(jù)交互
之前小編和大家分享過使用$http同服務器進行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數(shù)據(jù)交互。下面來一起看看吧。2016-09-09
這篇文章主要為大家詳細介紹了Angluar+zorro實現(xiàn)無限級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹 AngularJS 鏈接與圖片模板的知識，這里整理了相關資料及示例代碼，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
下面小編就為大家?guī)硪黄狝ngularJS實用基礎知識_入門必備篇(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要介紹了AngularJS 單選框及多選框的雙向動態(tài)綁定的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了Angular8 簡單表單驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06