首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用ng2- pdf -viewer获取pdf格式的点击部分坐标

ng2-pdf-viewer是一个用于在Angular应用中显示PDF文件的开源库。它基于PDF.js项目,提供了一个PDF查看器组件,可以方便地在应用中加载和显示PDF文件。

要使用ng2-pdf-viewer获取PDF格式的点击部分坐标,可以按照以下步骤进行操作:

  1. 首先,确保你的Angular项目已经集成了ng2-pdf-viewer库。可以通过npm安装该库:
代码语言:txt
复制
npm install ng2-pdf-viewer
  1. 在需要显示PDF文件的组件中,引入ng2-pdf-viewer库的相关模块:
代码语言:txt
复制
import { Component } from '@angular/core';
import { PDFDocumentProxy, PDFPageProxy } from 'ng2-pdf-viewer';
  1. 在组件类中定义一个变量来存储PDF文件的点击部分坐标:
代码语言:txt
复制
export class YourComponent {
  clickCoordinates: { x: number, y: number }[] = [];
}
  1. 在模板中使用ng2-pdf-viewer的PDF查看器组件,并绑定相关事件:
代码语言:txt
复制
<pdf-viewer
  [src]="pdfUrl"
  (after-load-complete)="onPDFLoadComplete($event)"
  (click)="onPDFClick($event)"
></pdf-viewer>
  1. 在组件类中实现相关事件的处理方法:
代码语言:txt
复制
export class YourComponent {
  pdfUrl = 'path/to/your/pdf/file.pdf';

  onPDFLoadComplete(pdf: PDFDocumentProxy) {
    // PDF加载完成后的处理逻辑
  }

  onPDFClick(event: MouseEvent) {
    const pdfViewerElement = event.target as HTMLElement;
    const boundingRect = pdfViewerElement.getBoundingClientRect();
    const offsetX = event.clientX - boundingRect.left;
    const offsetY = event.clientY - boundingRect.top;
    const clickCoordinate = { x: offsetX, y: offsetY };
    this.clickCoordinates.push(clickCoordinate);
  }
}

在上述代码中,onPDFLoadComplete方法用于在PDF加载完成后执行相关逻辑,你可以在该方法中获取PDF的页面数量、尺寸等信息。

onPDFClick方法用于处理PDF点击事件,它会获取点击位置相对于PDF查看器的坐标,并将坐标保存到clickCoordinates数组中。

通过以上步骤,你可以使用ng2-pdf-viewer获取PDF格式的点击部分坐标。你可以根据具体需求,进一步处理这些坐标,比如在PDF上绘制标记、执行其他操作等。

关于ng2-pdf-viewer的更多详细信息和使用方法,你可以参考腾讯云的相关产品文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 pdf.js 在网页中加载 pdf 文件

在网页中加载并显示PDF文件是最常见业务需求。例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票。(2)电子商务管理系统中查看发布公文,公文文件一般是PDF格式文件。 ?...目前随着浏览器技术发展不断成熟与强大,大部分浏览器都支持直接把PDF文件拖到浏览器中显示,最方便是这个操作不需要额外插件支持。但是不同浏览器加载显示PDF效果不同。...这时就需要专门JS插件来处理。Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在所有主流浏览器上显示PDF文档,使用起来十分方便。唯一要求就是浏览器必须支持HTML5。...该查看器中默认加载pdf.js 使用说明书内容。 ? 二、将 pdf.js 集成到项目网页中 将解压缩内容复制到项目中 ? 有多种方式加载加载并查看pdf文件内容。...file=http://localhost:8033/PDFTest/Pdf/项目的5个管理过程组和项目管理知识领域映射关系.pdf"> 点击查看pdf内容 点击a链接,打开独立窗口 ?

42.6K61

PDF文件使用指南

如果你经常使用计算机,就不可能不知道PDF格式。 它是公认分享文档最佳格式。但是,这种格式文件,必须用专门阅读器打开,而且不能编辑,所以对使用者来说,会遇到很多问题。...下面,我们将告诉你,如何应对你在使用PDF文件过程中,遇到几乎所有问题,而且完全不需要你去购买Adobe Acrobat。...另一种方法是,Gmail可以将Email中pdf附件转成html格式。 Q: 我如何才能将许多不同格式文件,合并成一个PDF文件?...Q: 我如何PDF文件中加入注释和笔记? A: 安装PDF-X Viewer,这是一个允许添加注解PDF阅读器。另一个选择是,PDF Escape网站也可以在线提供类似的功能。...A: 将你文件上传到PDF Hammer,设置一个密码,然后再将它以PDF格式输出即可。 Q: PDF文件中有很多链接,但是我无法点击,因为它们都是纯文本格式。怎样才能让这些链接变成可以点击

2.5K20

在纯JaveScript中实现报表导出:从“PDF”到“JPG”

我们在前端报表中完成了各种工作数据输入或内容处理之后,需要做什么? 数据导出! 这些数据常用导出格式有:PDF、Excel、HTML和图片几大类型。...这时候问题就出现了,在我们前端电子报表中并没有默认图片保存格式,那这时候我们如何用已有功能进一步扩展,来实现这个功能呢? 一、确定实现思路 巧妇难为无米之炊,首先我们先整理一下手中素材。...通过阅读文档了解我们可以自定义添加按钮: 同时我们还可以在action属性中,给按钮定义点击后触发事件: 顺着这个思路,我们可以在工具栏添加一个导出按钮,将按钮动作设置为"点击这个按钮时实现导出图片功能...这下子,我们最终问题就变成了是如何 将** PDF **转换为图片并导出 。...PDF.js是一款使用HTML5 Canvas安全地渲染PDF文件以及遵从网页标准网页浏览器渲染PDF文件JavaScript库。

2.1K30

怎么用浏览器在线打开pdf文件_PDF文件怎么编辑

jQuery Media Plugin jQuery Media Plugin是一款基于jQuery网页媒体播放器插件,它支持大部分网络多媒体播放器和多媒体格式,比如:Flash, Windows...Google Docs PDF viewer ZOHO Viewer Anychart:使用JavaScript导出PDF 下图可以导出为PNG或JPG格式静态图像或嵌入式静态图像,图表或一个完全互动功能图...jQuery Document Viewer Document Viewer是一个jQuery插件,可以让你在网页中直接查看多种文件格式。...文档浏览器支持文件格式PDF文件,文本文件,代码,图像,音频,视频等。...问题1:如何网页中嵌入PDF: 在网页中: 常用几种PDF预览代码片段如下: 代码片段1: 1 <object type="application/<em>pdf</em>" data="file:///D:/atm

6.9K60

可以转成PDF格式吗?

大家好,又见面了,我是你们朋友全栈君。 我们在打印文件时经常会遇到和我们保存格式不一样情况,为了无法轻易变更档案中数据,有些朋友就将其保存为xps格式文件。...下面就一起来看一下打开xps格式文件和转成PDF方法。 1、如何打开XPS文件 目前很多人电脑系统已更新WIN10系统,其实win10是自带打开XPS文件功能软件,操作也很方便。...首先点击电脑左下角开始菜单,在搜索框中输入XPS Viewer,并点击运行软件。 接着在主界面中选择要打开文件,即可进行阅读操作。...2、如何将XPS转成PDF 我们可以使用一些在线转换工具,这样不用下载和安装软件会更方便。...首先搜索speedpdf即可打开这个在线转换网页,接着点击页面中XPS to PDF(也可将xps转换成Word格式) 接着进入页面后点击上传文件添加要转换XPS文档上传后,下方列表文件进度条右侧

3.8K30

Fluid -3- pdf.js PC,移动端查看 PDF

hexo 有各种支持pdf查看方案,但大多不同时支持移动端和PC端,本文记录使用 pdf.js 实现各设备查看 pdf 方法。...简介 pdf.js 是用于解析和呈现 PDF 基于 Web 标准平台通用解决方案,功能强大。...官方网站:https://mozilla.github.io/pdf.js/ 下载 pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器,为了更好兼容性...,下载旧版本浏览器文件包 点击 Download 按钮 下载并解压相关内容 修改 viewer.js 直接使用下载文件会报错 Error: file origin does not match viewer's...需要注释掉 web/viewer.js 文件中相应内容: 加入主题 将下载文件夹命名为 pdfjs,拷贝到 themes/fluid/source/js 中 使用方法 在markdown 文档中使用

8.8K30

pdf.js预览pdf文件流(base64)

1、前言: 新接手一个老项目,需要改造pdf文件预览效果,接口直接返回pdf文件文件流base64字符串,前端只能拿到base64来进行预览。...pdf.js是一款非常优秀pdf解析工具,但不支持直接预览文件流,这里需要对pdf.js稍微改造。...,放在webapp下面,我把下载以后文件解压重新命名为pdfjs文件夹,如图  3、保存pdf文件流 我这里是一个接口返回包括内容详情,图片,pdf文件等所有内容,点击一条pdf记录,跳转打开新标签页进行预览...因此把接口返回pdf文件流base64编码先本地缓存.跳转到我们下载pdf文件夹里面的【viewer.html】文件。...源码 5.1 viewer.js更改 打开viewer.js,直接搜索“DEFAULT_URL”会找不到(因为网上有个别帖子版本是在viewer.js里搜到“DEFAULT_UR”并且要求注释),但是通过寻找

14.9K20

python处理xps文件_如何在Windows 10系统中处理XPS文件

也许这种类型文件不像PDF那样受欢迎,但了解XPS及其工作方式可能会有所帮助。 在本文中,我们将向您展示如何在Windows 10中处理XPS文件。 如何查看XPS文件窗口10 微软正在。...中使用XPS Viewer,但在更新之前手动删除它 如何安装XPS Viewer 最快捷方法是使用“设置”应用中“应用和功能”或“按需功能”。...►点击应用。 ►单击应用和功能。 ►在“应用和功能”下,点击“管理可选功能”链接。 ►单击“添加功能”按钮。 ►从列表中选择XPS Viewer。 ►单击“安装”按钮。...本指南中疑难解答步骤将帮助您: 将XPS转换为PDF 在没有其他应用程序情况下处理XPS文件快速方法是使用内置打印机进行转换。 ►使用XPS Viewer打开XPS文件。...XPS允许您决定谁可以编辑您XPS文档,以及有人可以使用这些权限时间。 对于此操作,XPS Viewer使用Windows权限管理服务系统,您必须拥有权限帐户证书。

4.1K10

手机和电脑将XPS转换成PDF免费方法

大家好,又见面了,我是你们朋友全栈君。 如何将XPS转成PDF?最近有小伙伴收到很多后缀为XPS文件,不知道如何打开,更不懂怎么样使用,如果能转成常用PDF格式就好了。...打开XPS文件最简单方法当然还是安装对应阅读器,比如XPS Viewer;除此之外其实很多PDF阅读器也是可以直接打开XPS文档,比如极速PDF阅读器。...用以上任意一种方式打开XPS文件后,利用PDF生成其中方式之一,将文件进行打印并选择PDF虚拟打印机就能直接将XPS文件以PDF格式进行保存了。...这种方式一般适用于电脑端,毕竟手机无法进行这种虚拟打印机操作。但如果是手机文档要转换怎么办呢? 有一种电脑和手机都使用方法,在线网页转换就能轻松搞定。...添加需要转换XPS文件后,点击转换按钮就可以了。等待转换完成直接下载即可。 为什么要在转换前进行账户登录呢?

98020

Hexo -18- 添加 PDF 阅读功能

几乎所有主流浏览器都拥有部分对 标签支持。...方法五 pdf.js 全平台查看PDF解决方案 使用方法 下载 pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器,...为了更好兼容性,下载旧版本浏览器文件包,点击 Download 按钮 下载并解压相关内容,使用 viewer.html 配合 iframe 插件查看pdf文件: 将pdfjs文件夹放到hexo...中,使用相对路径使用 建议放在hexo source文件夹并skip-render掉,这样可以主题无关地使用pdf阅读功能 <iframe src='/vvd_js/pdfjs/web/<em>viewer</em>.html...<em>viewer</em>'s 需要注释掉 web/viewer.js 文件中相应内容: 示例: 这是目前发现唯一支持多平台浏览PDF方案 参考资料 https://github.com/superalsrk

2.8K10

pdf.js分片加载、分段加载golang beego

带有第一部分或全部pdf数据类型化数组。...由扩展使用,因为在切换到范围请求之前已经加载了一些数据。 disableRange 布尔 (可选)禁用PDF文件范围请求加载。启用后,如果服务器支持部分内容请求,则将以块形式提取PDF。...disableAutoFetch 布尔 (可选)禁用PDF文件数据预取。启用范围请求后,即使不需要显示当前页面,PDF.js也会自动继续获取更多数据。默认值为“false”。...实现按需加载,节省流量和内存 - 小黑电脑 3.3 pdfjs关闭自动获取   在pdfjs发行包web/viewer.js文件中,找到配置项disableAutoFetch,可以看到它默认值是false...将它改为true,意味着关闭自动获取,它仅仅会下载所需要分片,实现了按需加载。

20.4K20

Xilinx Bit文件格式详解

比如在一些特定情况下,我们只有一个.bit文件,我们如何获取到以下信息呢?...,mcs文件只包含bit文件中数据部分,上一篇文章介绍了MCS文件格式,本文简单介绍Xilinx bit文件基本构成。...Xilinx Bit文件如何生成 Xilinx ISE开发环境,支持多种程序文件文件生成,.bit/.bin/.rbt/.isc,其中.bin格式文件不能下载到FPGA内部,也不能用来转换为mcs。...指定用户代码 Xilinx Bit文件格式 bit文件是二进制编码文件,不能使用文本工具打开,可以使用二进制编辑工具查看。 使用Binary Viewer打开一个bit文件:demo.bit ?...【电子电路开发学习】,后台回复【bit文件】,获取以上文档打包下载链接。

4.5K30

PDF.js专题

2.1 demo程序结构翻译 build/ pdf.js display layer 显示层采用核心层并且暴露了一个更容易使用API来渲染PDF文件,并获得其他资料出文件。...点击翻页操作,或者改变IE窗口大小会触发viewerpdf进行重新解析和渲染。...还有更多改进技术,我们可以建议: 1.避免使用高清晰度图像- 建议不超过150dpi分辨率扫描图像,尤其是对于低功率设备; 2.如果可能的话,尝试使用JPEG编码彩色图像或者是RGB色彩照片...; 3.避免使用华丽成分/效果,如转换/屏蔽- 拼合透明度; 4.避免使用PDF生成器(或者不创造内容)产生无效PDF输出(如LibreOffice中创建大量微小图像,矢量元素/图片);...5.使用网络优化格式PDF; 6.修复或不产生不符合PDF32000规范PDF文件。

20.9K112

XPS文件转换成PDF

作者:iamlaosong XPS是XML PaperSpecification(XML文件规格书)简称,是一种电子文件格式, 它是微软公司开发一种文档保存与查看规范,关联阅读器是XPS Viewer...同事有一个XPS文件,希望能够转换成PDF格式。...2、点击“打开”,选择要转换XPS文件。3、不出意外的话XPS文件可以正常打开并看到内容。4、另存为PDF文件即可。 电脑上有其他版本PDF阅读器或者制作工具,均可以试试这个方法。...方法二:电脑上安装了PDF虚拟打印机 1、首先找到一个xps文件,双击打开文件。2、点击左上角“文件”图标,等待弹出下拉菜单。3、在弹出下拉菜单,点击选择“打印”。4、点击选择PDF打印机。...5、点击“打印”就可以了。6、确认PDF参数,点击创建”。7、耐心等待文档转换等待文档转换完成,现在就打开了PDF文档了。 其实在安装PDF阅读器时,很多软件都附带了PDF虚拟打印机。

1.7K20

三大神器助力Python提取pdf文档信息

注意我使用Python版本为3.6。 首先介绍pdfminer。pdminer是一个从PDF文档中提取信息工具。与其他pdf相关工具不同,它完全专注于获取和分析文本数据。...PDFMiner允许获取页面中文本的确切位置,以及其他信息,比如字体或行。它包括一 个PDF转换器,可以将PDF文件转换成其他文本格式(如HTML)。...下面将演示如何使用它。首先我们需要识别这张图片上所有文字,并以原来所在行进行返回: ?...所以你们如果有好方法点击阅读原文,留言和我交流啊。 前面是针对本地pdf,那么有小伙伴们就要问了,如果是线上pdf呢?我们应该怎么办?别急这里就教你如何解决。...看到没有,这里蓝色柱就是代表数据,不过它也有一个缺点就是无法做到精确范围限定,虽说有坐标,但是你很难获取精确坐标。但是就目前而言,它能做到这样已经很不错了。

19.6K1712

R将SVG文件转换成pdf或者png

svg是一种矢量图文件,一般图片查看工具是无法打开。那么如何正常打开svg格式文件?下面小编就给大家介绍一下打开svg格式文件方法,希望对大家有所帮助。...最常用SVG插件来自Adobe公司Adobe SVG Viewer,它最具有代表性SVG浏览插件,另外Corel公司也提供SVG浏览器Corel SVG Viewer。...2、使用Adobe Illustrator 使用Adobe Illustrator可以查看而且能够再次编辑svg文件,还能导出保存为svg或其他格式文件。...3、使用SVGDeveloper SVGDeveloper是一款免费SVG格式编辑器,具有强大绘制功能,可以绘制地图、文本、自由曲线等复杂SVG图形,强大代码编辑器,提供语法着色和智能语法提示等功能...如果你没有安装上面的任何一款软件,那么我们也可以用手头R直接将svg格式文件转换成pdf或者png #安装rsvg包 install.packages("rsvg") #加载rsvg包 library

1.1K30
领券