如何获取当前视图区域的截图？

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:
snapshot,当前视图,截图

如何获取当前视图区域的截图？

福昕知识库
2025-04-26

PDFViewer类下提供了一个 takeSnapshot 的接口，允许开发者生成页面上指定区域的图片。该接口的输入是目标页面的索引值、指定区域（矩形区域）左上角的顶点坐标（在设备坐标系下），以及要截图区域的宽和高。输出是指定区域的图片对象 —— Promise<Blob>。

PDFDocRender类下提供了一个 getBoundingClientRects 的接口，可以获取到当前视图区域的设备坐标信息。

所以想要获取当前视图区域的截图，需要分别获取到当前视图区域的页面索引，以及设备坐标系下的区域坐标信息。

示例代码如下：

//获取当前文档的渲染对象
var docRender = await pdfui.getPDFDocRender();

//获取当前视图中心点位置的页面页码信息,也可以使用docRender.getCurrentPageIndex()
var curPageIndex = docRender.currentPageNumber; 
console.log(curPageIndex);

//获取可见区域的所有页面矩形区域信息（设备坐标）
let viewerAreaInfos = await docRender.getBoundingClientRects();

//当前可视区域内可能含有多个页面的内容，这里只截取视图中心点所在页面的可见区域，所以要对viewerAreaInfos进行过滤

let viewerAreaInfo = viewerAreaInfos.find((item) => item.index === curPageIndex);

await pdfui.takeSnapshot(viewerAreaInfo.index, viewerAreaInfo.left, viewerAreaInfo.top, viewerAreaInfo.width, viewerAreaInfo.height).then(blob => {
    console.log(blob);
    const url = URL.createObjectURL(blob);
    console.log(url);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', "test");
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href); // 释放URL 对象
    document.body.removeChild(link);
});

备注：

PDFUI类是从PDFViewer类继承的，但这是一个特例。这种继承关系不是一般的继承。PDFUI只继承了方法声明，实际上委托了PDFViewer实例。因此您不能通过PDFUI实例直接访问PDFViewer属性或接口。由于内部实现机制，PDFViewer上的方法在PDFUI实例上被异步调用，返回值将是Promise。

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

专业获取当前页面截图的技术实现方案

PDF文档关键词搜索替换功能的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在WebSDK实现放置签名