当前位置：首页 > 资讯 > 技术文档

Angular2下使用pdf插件的方法详解

时间：2021-12-21 08:10 编辑：来源：阅读：
扫一扫，手机访问

摘要：Angular2下使用pdf插件的方法详解

[b]前言[/b] 最近因为工作的原因，需要在Angualr2建的项目里做一个pdf显示的功能，在网上找了个插件，不过由于是第一次使用额外插件，在用的时候遇到了一些坑，这里权且记一下使用的步骤，方便以后的参考。 [b]安装[/b] 这里需要安装两个包：[code]pdfjs-dist[/code]和[code]ng2-pdf-viewer[/code]，安装时是要顺便保存到[code]package.json[/code]里的，因此在项目根目录下输入下面命令：

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' }
}

这样我们才能正确的引用这个包。 [b]注册主配置文件[/b][b] [/b] 要使用他，我们还要在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);

[b]注意：[/b]要import，然后在@NgModule里的declarations里注册即可。 [b]页面配置[/b] 在模板页面中，只要在适当的位置添加类似下面的标签：

<pdf-viewer [src]="pdfSrc"
 [ page ]="page"
 [original-size]="true"
 style="display: block;">

</pdf-viewer>

然后在.ts文件里定义pdfSrc以及page变量，即可控制显示的文件路径以及页数。 [b]这里需要注意的是：[/b]文件源如果是跨域的话是会报一个error的，而且这里的page是竖排显示的而不是带滚轮的显示，因此这实际上显示的是一张一张的图片。当然，pdf-viewer还有很多其他的属性，比如支持缩放，旋转，以及提供了一系列相关的回调函数，具体的可以在[url=https://github.com/VadimDez/ng2-pdf-viewer]github[/url]里找到，当然大家也可以通过[url=http://xiazai.jb51.net/201704/yuanma/ng2-pdf-viewer-master(jb51.net).rar]本地下载[/url]。 [b]样例[/b] [img]http://files.jb51.net/file_images/article/201704/201742985251426.png?201732985431[/img] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：AngularJs 延时器、计时器实例代码
下一篇：AngularJS基础教程之简单介绍

资讯排行榜
更多>>