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


Posted in Javascript onApril 29, 2017

前言

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

安装

这里需要安装两个包:pdfjs-distng2-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里注册即可。

页面配置

在模板页面中,只要在适当的位置添加类似下面的标签:

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

</pdf-viewer>

然后在.ts文件里定义pdfSrc以及page变量,即可控制显示的文件路径以及页数。

这里需要注意的是:文件源如果是跨域的话是会报一个error的,而且这里的page是竖排显示的而不是带滚轮的显示,因此这实际上显示的是一张一张的图片。

当然,pdf-viewer还有很多其他的属性,比如支持缩放,旋转,以及提供了一系列相关的回调函数,具体的可以在github里找到,当然大家也可以通过本地下载。

样例

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 #Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
Javascript实现数组中的元素上下移动
Apr 28 #Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
JS简单判断滚动条的滚动方向实现方法
Apr 28 #Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
php生成二维码
2015/08/10 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
js轮播图代码分享
2016/07/14 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python关于变量名的基础知识点
2020/03/03 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
咖啡店创业计划书范文
2014/09/15 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
护士求职自荐信范文
2015/03/04 职场文书
python文件目录操作之os模块
2021/05/08 Python
MySQL中in和exists区别详解
2021/06/03 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
你需要掌握的20个Python常用技巧
2022/02/28 Python
Redis主从复制操作和配置详情
2022/09/23 Redis