angularjs pdf插件_Angular2下使用pdf插件的方法详解

这篇博客介绍了如何在Angular2项目中集成pdfjs-dist和ng2-pdf-viewer插件来实现PDF显示功能。文章详细讲解了安装、配置以及在页面中使用的方法,并提到了跨域和页面展示方式的问题。此外,还提到ng2-pdf-viewer具有缩放、旋转等特性,并鼓励读者查阅更多官方文档以获取更多信息。
摘要由CSDN通过智能技术生成

前言

最近因为工作的原因,需要在Angualr2建的项目里做一个pdf显示的功能,在网上找了个插件,不过由于是第一次使用额外插件,在用的时候遇到了一些坑,这里权且记一下使用的步骤,方便以后的参考。

安装

这里需要安装两个包: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' }

}

这样我们才能正确的引用这个包。

注册主配置文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值