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

福昕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。

如何用颜色自动标记修改过的文本？

如何设置将主程序界面默认启动界面？

设置水印选择水印模版时提示“无法找到您指定的原始文件。请重试。”是什么原因？

pdf文件里文字复制到word里都是乱码怎么办，如何修护文件？

高校caris登录入口点击没有反应，无法打开浏览器怎么办？

在福昕高级PDF编辑器中，如何隐藏在选择文本之后出现浮动的工具栏？

若通过 Office 调用福昕高级 PDF 编辑器的虚拟打印机转换文档时，即便将尺寸设为 letter（21.59*27.94），打印出的 PDF 文档尺寸仍为 A4 大小，如何解决呢？

在使用福昕高级 PDF 编辑器时，您是否希望文档尺寸信息能在页面中持续显示，而非仅鼠标悬浮时才出现？

使用擦除工具清除文档部分内容时，关闭的提示框如何恢复？

福昕高级 PDF 编辑器自定义图章与签名存放路径说明