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

前言

最近因为工作的原因，需要在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' }
}

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

注册主配置文件

要使用他，我们还要在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里找到，当然大家也可以通过本地下载。

样例

总结

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

赞 (0)

相关推荐

  • 如何在Angular.JS中接收并下载PDF

    介绍 jsPDF 是一个使用Javascript语言生成PDF的开源库.你可以在Firefox插件,服务端脚本或是浏览器脚本中使用它. 客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等.IE暂不支持. 示例代码: var doc = new jsPDF(); doc.text(20, 20, 'Hello world.'); doc.save('Test.pdf'); 服务器端可以完美运行. jsPDF使用方便,但是不支持中

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

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

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

  • IDEA下使用MyBatisCodeHelper插件的方法详解

    一:IDEA下使用MyBatisCodeHelper插件.(IDEA的版本 2018 2.5亲测可用) 1.1  IDEA安装MyBatisCodeHelper插件. MyBatisCodeHelper插件现在要付费了,有条件可以买激活码激活的,支持正版,这里演示安装硬盘下载的插件的方式来介绍安装. 下载链接: 链接: https://pan.baidu.com/s/1I-XlrPPVAuzsu9_XY0eEUQ 提取码: bqvn ,内含多个版本的.下载解压查看. Mybatis-Plugin

  • bootstrap select下拉搜索插件使用方法详解

    bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台 或者 直接加载动态数据. 下面是根据一级下拉菜单,动态加载二级联动方式.(不是ajax后台获取) 首先引入js与css文件(一个css两个js) <link rel="stylesheet" href="css/bootstrap-select.css" rel="external nofollow" > js省略 一.下拉搜索(html) &

  • Python生成图文并茂的PDF报告的方法详解

    Python生成图文并茂的PDF报告的方法详解

    目录 安装第三方库 模块导入 封装不同内容对应的函数 生成报告 reportlab是Python的一个标准库,可以画图.画表格.编辑文字,最后可以输出PDF格式.它的逻辑和编辑一个word文档或者PPT很像.有两种方法: 1)建立一个空白文档,然后在上面写文字.画图等: 2)建立一个空白list,以填充表格的形式插入各种文本框.图片等,最后生成PDF文档. 因为需要产生一份给用户看的报告,里面需要插入图片.表格等,所以采用的是第二种方法. 安装第三方库 reportlab输入Python的第三方

  • Java实现添加条形码到PDF表格的方法详解

    Java实现添加条形码到PDF表格的方法详解

    目录 程序环境 代码示例 条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格时,向单元格中添加条形码. 程序环境 本次功能测试中,使用 Free Spire.PDF for Java. 实现功能的大致思路:生成条形码,将条形码保存为图片,然后在PDF中的表格单元格中插入条码图片. Spire.PDF for Java 中的Spire.Pdf.Bar

  • inux下gettimeofday函数windows替换方法(详解)

    实例如下: #include <time.h> #ifdef WIN32 # include <windows.h> #else # include <sys/time.h> #endif #ifdef WIN32 int gettimeofday(struct timeval *tp, void *tzp) { time_t clock; struct tm tm; SYSTEMTIME wtm; GetLocalTime(&wtm); tm.tm_year

  • Linux环境下Oracle安装参数设置方法详解

    前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作. 1.系统信息查看 系统信息查看 首先服务器ip:192.168.8.120 服务器系统:Oracle Linux Server release 6.5 服务器主机名:oracle-learn 查看磁盘空间情况: [root@oracle-learn ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 32G 4.8G 26G

  • 在linux下升级软件包版本等方法详解

    Linux环境下,要想查看某个软件(package)是否安装. rpm包方式安装的,使用 rpm -qa | grep "软件或者包的名字". yum方式安装的, yum list installed | grep "软件或者包的名字". 升级软件包版本. 我们经常会遇到依赖其他版本包的情况(一般是更新的版本),这时候我们需要升级包. 1.卸载后安装新的包. 首先要根据文首提到的查看软件包是否安装的方式查看你是否安装了这个软件,若没有安装,找到路径后使用wget命令

  • 对angularjs框架下controller间的传值方法详解

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$rootScope, $cope.$parent指向父

  • Bootstrap Paginator分页插件使用方法详解

    Bootstrap Paginator分页插件使用方法详解

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

随机推荐