Angular 使用ng2-pdf-viewer显示pdf文件

最新推荐文章于 2024-08-13 08:41:33 发布
最新推荐文章于 2024-08-13 08:41:33 发布
阅读量3.4k 收藏
点赞数
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44917045/article/details/107595662
版权

1、需求：
在项目开发中，上传pdf文件之后，需要对上传的pdf文件进行在线浏览。

2、方法：
① 安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save

② html

<div class="pdf-container">
    <pdf-viewer [src]=
最低0.47元/天 解锁文章
angularjs pdf插件_angular-pdf-viewer
weixin_33372672的博客
01-13 353
Angular PDF ViewerAn AngularJS directive to display PDFs. DEMODependenciesUsagebower install angular-pdf-viewerInclude the path to the lib, AngularJS and PDFJS:Include the lib as a dependency in your ...
Angular-ng2-pdf-viewer.zip
09-18
Angular-ng2-pdf-viewer.zip,用于Angular 5 Angular 5 PDF查看器的PDF查看器组件,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
angular查看pdf
07-10
angularJS 查看pdf的demo HTML5开发小样
angularjs-pdf-master 在线预览
04-12
angularjs框架中，实现移动端pdf文档在线预览功能
ng2-pdf-viewer使用报错form ‘./typings‘的解决方案【angular实现pdf预览】
weixin_43936341的博客
04-15 1295
话不多说直接上图，报错如下： 这个报错不是发生在使用过程中，而是引入时直接报错，本人所有操作都是根据【官方文档】提示进行（官方文档地址：https://github.com/VadimDez/ng2-pdf-viewer#readme），却还是踩坑了。 目测此报错原因是少了某个文件或者依赖，于是上网搜索各处找资料，有心人天不负终于让我找到了。本人用的angular@8.1.2版本，根据官网提示下载了 ng2-pdf-viewer@^7.0.0 ，而这样的默认组合其实是有问题的； 解决方案： 卸载ng2-p
ng2-pdf-viewer 项目教程
gitblog_00391的博客
08-13 886
ng2-pdf-viewer 项目教程 项目地址:https://gitcode.com/gh_mirrors/ng/ng2-pdf-viewer 1. 项目的目录结构及介绍 ng2-pdf-viewer 是一个用于 Angular 的 PDF 查看器组件。项目的目录结构如下： ng2-pdf-viewer/ ├── e2e/ │ ├── src/ │ ├── protractor.con...
Angular 5+ PDF查看器组件：ng2-pdf-viewer的使用和安装
资源摘要信息:"ng2-pdf-viewer是Angular 5+环境下的一个PDF Viewer组件，用于在Angular应用程序中嵌入和展示PDF文件。它提供了一个简单而直观的方式让开发者在他们的应用中实现PDF文档的查看功能。该组件支持Angular...
ng2-lean-pdf-viewer: Angular 11中基于PDFjs的简易PDF查看器实现指南
资源摘要信息:"ng2-lean-pdf-viewer是一个基于Mozilla开发的PDFjs库的Angular 11组件，专门用于实现PDF文件的简单查看功能。它提供了基础的Canvas层和文本层渲染，非常适合那些需要从头开始构建PDF查看器功能的...
Angular2下使用pdf插件的方法详解
11-27
由于Angular2使用SystemJS作为模块加载器，我们需要在`system.config.js`文件中配置映射，使得SystemJS知道如何加载这两个包。在`map`对象中添加如下配置： ```javascript var map = { ... 'ng2-pdf-viewer': '...
前端项目-ng-pdfviewer.zip
09-03
ng-pdfviewer是一个AngularJS指令，它将pdf.js库封装为一个易于使用的组件，允许开发者在AngularJS应用中无缝地显示PDF文件。AngularJS，作为一款强大的前端框架，以其双向数据绑定和模块化特性著称，ng-pdfviewer则...
ng2-pdfjs-viewer：PDFJS和ViewerJS的angular 8组件（支持angular 24567）
02-01
带有Mozilla的ViewerJS的Angular PDFJS查看器。 支持Angular 2+（Angular版本^ 2.0.0至^ 10.0.0） :party_popper: 非常感谢社区-现在下载量超过40万！！！ 拉取请求和贡献非常感谢。 这是一个非常简单的angular 8组件，用于以嵌入式（嵌入式）方式或在新标签中显示PDF以及功能丰富的查看器。 它在后台使用了Mozilla的pdfjs查看器（v2.2.171），并支持角度版本^ 2.0.0至^ 10.0.0。 该库极其轻巧，最易于集成和使用，最可靠，仅具有一个依赖项（@ angular / core）。 有什么新东西？ 直接访问基础查看器-暴露的PDFViewerApplication和PDFViewerApplicationOptions对象打开了可自定义的PDFJS和ViewerJS属性和方法的整个世界，从而可以通过编程方式对其进行更改； 从而产生独特的观众体验。 动态页码-为页码添加了Getter / Setter。 加载文档后更改页码，或访问父组件中的当前页。 对事件的支持-您现在可以注册多个事件
ng2-lean-pdf-viewer:基于Mozilla的PDFjs库的Angular 11中非常简单的PDF查看器实现。 对于任何希望在最基本功能（例如Canvas层+文本层渲染）上构建的人来说，这都是一个不错的起点。 所需的所有样板代码已包含在内
03-28
Ng2LeanPdfViewer 该项目是使用版本11.0.6生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看页面
ng2-pdf-viewer：:page_facing_up:Angular 5+的PDF Viewer组件
01-31
Angular 5+ PDF查看器 Angular 5+的PDF Viewer组件 演示页面 Stackblitz示例 博客文章 总览 安装 npm install ng2-pdf-viewer --save 注意：对于角度为4或以下的版本，请使用版本3.0.8 用法 如果您使用的是systemjs请参见配置。 将PdfViewerModule添加到模块的imports import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppComponent } from './app/app.component' ; import { PdfViewerModule } from 'ng2-pdf-viewer' ; @ NgModule ( { imports : [ BrowserModule , PdfViewerModule ] , declarations : [ AppComponent ] ,
ng2-pdf-viewer实践
Nile_Holmes的博客
07-01 2184
1. 技术架构及版本 Angular 8.2.0 ng2-pdf-viewer 5.3.4 2.代码 component import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-doc-preview', templateUrl: './doc-preview.component.html', styleUrls: ['./doc-preview.component.scss'] }) exp
ng2-pdf-viewer 使用教程
最新发布
gitblog_00891的博客
08-13 709
ng2-pdf-viewer 使用教程 项目地址:https://gitcode.com/gh_mirrors/ng/ng2-pdf-viewer 项目介绍 ng2-pdf-viewer 是一个用于 Angular 应用程序的 PDF 查看器组件。它允许开发者在 Angular 项目中嵌入 PDF 文件，并提供了丰富的配置选项来控制 PDF 的显示方式。该项目是开源的，可以在 GitHub 上找到...
工作学习总结--ng2-pdf-viewer的运用
时清云的博客
09-01 5025
最近有一个展示pdf文件的需求，而且还要展示合同中的签章，所以查了好多资料，先是用了pdf.js，但是在安卓手机闪退，所以又尝试了ng2-pdf-viewer这个插件，虽然在ios手机上签章展示不出来，最后还是使用了pdf.js，但我还是想把这次尝试的过程记录下来。来吧，进入正题 第一步，安装ng2-pdf-viewer npm install ng2-pdf-viewer --save 安装之...
angular项目中显示word, pdf, 文档的插件
ITronger的专栏
12-07 967
1. 对于显示pdf经过测试，可以前端直接上传文档不需要url或者使用url都可以的插件最好用的是ngx-extended-pdf-viewer。同时在angular.json中配置assets, scripts。2. 对于显示word，使用的是ngx-doc-viewer。或者直接传入pdf所在文件的url地址。
Angular之图片查看组件
chuisan8661的博客
03-01 2780
Angular4+图片查看组件，支持拖动。缩放。DomHandler是一个操作dom的工具 /** * Created by MarkBell on 2018/1/8. */ import { NgModule, Component, ElementRef, OnInit, After...
Angular 与PDF之二：打印预览的实现
KenkoTech的博客
05-03 2073
Angular 打印预览
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值