使用JavaScript将PDF页面中的标注扁平化的操作指南

2025-01-08 03:50

本文主要是介绍使用JavaScript将PDF页面中的标注扁平化的操作指南,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer...

使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能

  • 创建一个包含以下模板的新html文件。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-Scalable=no">
  <title>Burn PDF Annotation</title>
  <style>
  </style>
</head>
<body>
</bodhttp://www.chinasem.cny>
<script>
</script>
</html>
  • 在页面中包含Dynamsoft Document Viewer的文件。
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.css" rel="external nofollow" >
  • 使用许可证初始化Dynamsoft Document Viewer。可以在这里申请一个证书。
Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDandroidb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
Dynamsowww.chinasem.cnft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.init();
  • 创建一个新的文档实例。
const docManager = Dynamsoft.DDV.documentManager;
const doc = docManager.createDocument();
  • 创建一个Edit Viewer实例,将其绑定到一个容器,然后用它来查看我们刚刚创建的文档。其上的按钮可以使用UIConfig对象进行配置。添加标注按钮以添加创建标注的操作入口。

HTML:

<div id="viewer"></div>

JavaScript:

Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
let uiConfig = {
  type: "Layout",
  FlexDirection: "column",
  className: "ddv-edit-viewer-desktop",
  children: [
    {
      type: "Layout",
      className: "ddv-edit-viewer-header-desktop",
      children: [
        {
          type: "Layout",
          children: [
            "ThumbnailSwitch",
            "FitMode",
            "DisplayMode",
            "RotateLeft",
            "Crop",
            "Filter",
            "Undo",
            "Redo",
            "DeleteCurrent",
            "DeleteAll",
            "Pan",
            "SeparatorLine",
            "AnnotationSet"
          ],
          enableScroll: true
        },
        {
          type: "Layout",
          children: [
            {
              "type": "Pagination",
              "className": "ddv-edit-viewer-pagination-desktop"
            },
            {
              type: Dynamsoft.DDV.Elements.Button,
              className: "ddv-button-download",
              events: {
                click: "exportPDFWithOptions",
              },
            },
          ]
        }
      ]
    },
    "MainView"
  ]
}
editViewer = new Dynamsoft.DDV.EditViewer({
  uiConfig: uiConfig,
  container: document.getElementById("viewer")
});

CSS:

#viewer {
  width: 320px;
  height: 480px;
}
  • 使用input选择图像或PDF文件,并将其加载到文档实例中。

HTML:

<label>
  Select a file to load:
  <br/>
  <input type="file" id="files" name="files" onchange="filesSelected()"/>
</label>

javascript

async function filesSelected(){
  let filesInput = document.getElementById("files");
  let files = filesInput.files;
  if (files.length>0) {
    const file = files[0];
    const blob = await readFileAsBlob(file);
    await doc.loadSource(blob); // load the file
  }
}

function readFileAsBlob(file){
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = async function(e){
      const response = await fetch(e.target.result);
      const blob = await response.blob();
      resolve(blob);
    };
    fileReader.onerror = function () {
      reject('oops, something went wrong.');
    };
    fileReader.readAsDataURL(file);
  })
}

我们将能够看到如下查看器:

使用JavaScript将PDF页面中的标注扁平化的操作指南

扁平化标注并保存PDF

Dynamsoft Document Viewer支持四种处理PDF标注的方式:

  • none:丢弃所有标注
  • image:将所有内容合并到光栅图像中
  • flatten:扁平化所有标注
  • annotation:以可编辑的形式保存标注。标记为扁平化的单个标注仍将被扁平化

我们可以使用flatten选项保存PDF文件来扁平化所有标注。

let blob = await doc.saveToPdf({
  saveAnnotation: "flatten"
})

如果我们想在使某些标注扁平化的同时保留某些标注的可编辑性,我们可以使用标注的扁平化属性,并使用annotation选项保存PDF。

let annotations = Dynamsoft.DDV.annotationManager.getAnnotationsByDoc(doc.uid);
let annotation = annotations[0];
annotation.flattened = true;
let blob = await doc.saveToPdf({
  saveAnnotation: "annotation"
})

内部是如何运作的

PDF文件使用PostScript语言描述。我们将使用一些示例来展示扁平化的内部操作细节。

PDF文件会包含许多字典,下面是一个页php面字典的示例:

4 0 obj
<<
  /Type/Page                 % Specifies that this dictionary defines a page.
  /Annots[ 8 0 R ]           % A list of references to annotation objects on this page.
  /Contents 7 0 R            % Reference to page content stream.
  /MediaBox[ 0 0 147 143.25] % Page dimensions.
  % Other page properties
>>
http://www.chinasem.cnendobj
7 0 obj
<</Filter/FlateDecode/Length 44>>stream
x??41W0 BCc=#S039椝 ?J缫w媹0Tp蒞? 卵	
endstream
endobj

以上页面引用了以下标注字典:

8 0 obj
<<
  /Type/Annot
  /AP<<
  /Contents(annotation)
    /CreationDate(D:20241227135119+08'00')
    /DA(0.9411764705882353 0.07450980392156863 0.0784313725490196 rg /Helvetica 16 Tf)
    /DS(font:  'Helvetica' 16pt; text-align:left; color:#F01314)
    /F 4
    /IT/FreeTextTypeWriter/M(D:20241227135125+08'00')/NM(m56c4eb9uq)/RC(<?XML version="1.0"?><body xmlns="http://www.w3.org/1999/Xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xfa:APIVersion="AcroBAT:18.11.0" xfa:spec="2.0.2"><p dir="ltr"><span>annotation</span></p></body>)
    /Rect[ 22.1854 112.467 98.423 129.217]
    /Subj()
    /Subtype
    /FreeText
    /T()
>>
endobj

扁平化后,页面字典将变为以下内容。它不再具有标注节点,并将转换成图形的标注的节点附加到其正文中。

4 0 obj
<<
  /Type/Page
  /Contents 13 0 R
  /MediaBox[ 0 0 147 143.25]
>>
endobj
7 0 obj
<</Filter/FlateDecode/Length 48>>stream
x???41W0 BCc=#S039椝 ?J缫w媹0Tp蒞溻
 靔	?
endstream
endobj
13 0 obj
[ 7 0 R  14 0 R ]
endobj
14 0 obj
<</Filter/FlateDecode/Length 29>>stream
x?T0T0 B櫆珷镦b犩挴 M+?
endstream
endobj

以上就是使用JavaScript将PDF页面中的标注扁平化的操作指南的详细内容,更多关于JavaScript PDF标注扁平化的资料请关注China编程(www.chinasem.cn)其它相关文章!

这篇关于使用JavaScript将PDF页面中的标注扁平化的操作指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1152975

相关文章

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配

Java 8 Stream filter流式过滤器详解

《Java8Streamfilter流式过滤器详解》本文介绍了Java8的StreamAPI中的filter方法,展示了如何使用lambda表达式根据条件过滤流式数据,通过实际代码示例,展示了f... 目录引言 一.Java 8 Stream 的过滤器(filter)二.Java 8 的 filter、fi

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue(1)定义实现Delayed接口的实体类 (

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

springboot的调度服务与异步服务使用详解

《springboot的调度服务与异步服务使用详解》本文主要介绍了Java的ScheduledExecutorService接口和SpringBoot中如何使用调度线程池,包括核心参数、创建方式、自定... 目录1.调度服务1.1.JDK之ScheduledExecutorService1.2.spring

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

Java使用Tesseract-OCR实战教程

《Java使用Tesseract-OCR实战教程》本文介绍了如何在Java中使用Tesseract-OCR进行文本提取,包括Tesseract-OCR的安装、中文训练库的配置、依赖库的引入以及具体的代... 目录Java使用Tesseract-OCRTesseract-OCR安装配置中文训练库引入依赖代码实

Java中对象的创建和销毁过程详析

《Java中对象的创建和销毁过程详析》:本文主要介绍Java中对象的创建和销毁过程,对象的创建过程包括类加载检查、内存分配、初始化零值内存、设置对象头和执行init方法,对象的销毁过程由垃圾回收机... 目录前言对象的创建过程1. 类加载检查2China编程. 分配内存3. 初始化零值4. 设置对象头5. 执行