前言

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供臨潭網(wǎng)站建設(shè)、臨潭做網(wǎng)站、臨潭網(wǎng)站設(shè)計(jì)、臨潭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、臨潭企業(yè)網(wǎng)站模板建站服務(wù)，十多年臨潭做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

最近因?yàn)楣ぷ鞯脑?，需要在Angualr2建的項(xiàng)目里做一個(gè)pdf顯示的功能，在網(wǎng)上找了個(gè)插件，不過(guò)由于是第一次使用額外插件，在用的時(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è)包。

注冊(cè)主配置文件

要使用他，我們還要在app.module.ts文件里注冊(cè)這個(gè)包，才能在其他文件里使用，一個(gè)最簡(jiǎn)單的配置如下：

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里注冊(cè)即可。

頁(yè)面配置

在模板頁(yè)面中，只要在適當(dāng)?shù)奈恢锰砑宇愃葡旅娴臉?biāo)簽：

<pdf-viewer [src]="pdfSrc"
 [ page ]="page"
 [original-size]="true"
 >

</pdf-viewer>

然后在.ts文件里定義pdfSrc以及page變量，即可控制顯示的文件路徑以及頁(yè)數(shù)。

這里需要注意的是：文件源如果是跨域的話是會(huì)報(bào)一個(gè)error的，而且這里的page是豎排顯示的而不是帶滾輪的顯示，因此這實(shí)際上顯示的是一張一張的圖片。

當(dāng)然，pdf-viewer還有很多其他的屬性，比如支持縮放，旋轉(zhuǎn)，以及提供了一系列相關(guān)的回調(diào)函數(shù)，具體的可以在github里找到，當(dāng)然大家也可以通過(guò)本地下載。

樣例

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前標(biāo)題：Angular2下使用pdf插件的方法詳解
URL標(biāo)題：http://www.rwnh.cn/article22/gopsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、外貿(mào)建站、做網(wǎng)站、搜索引擎優(yōu)化、服務(wù)器托管、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)