使用JavaScript將PDF頁面中的標(biāo)注扁平化的操作指南

更新時(shí)間：2025年01月07日 09:24:25 作者：xulihang

扁平化(flatten)操作可以將標(biāo)注作為矢量圖形包含在PDF頁面的內(nèi)容中,使其不可編輯,Dynamsoft Document Viewer是一個(gè)用于文檔掃描和查看的JavaScript SDK,可以添加標(biāo)注、導(dǎo)出PDF,在本文中,我們將探討如何使用它,需要的朋友可以參考下

使用Dynamsoft Document Viewer打開一個(gè)PDF文件并啟用標(biāo)注添加功能

創(chuàng)建一個(gè)包含以下模板的新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>
</body>
<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"  rel="external nofollow" >

使用許可證初始化Dynamsoft Document Viewer?？梢栽?a rel="external nofollow" target="_blank">這里申請(qǐng)一個(gè)證書。

Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
Dynamsoft.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();

創(chuàng)建一個(gè)新的文檔實(shí)例。

const docManager = Dynamsoft.DDV.documentManager;
const doc = docManager.createDocument();

創(chuàng)建一個(gè)Edit Viewer實(shí)例，將其綁定到一個(gè)容器，然后用它來查看我們剛剛創(chuàng)建的文檔。其上的按鈕可以使用UIConfig對(duì)象進(jìn)行配置。添加標(biāo)注按鈕以添加創(chuàng)建標(biāo)注的操作入口。

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文件，并將其加載到文檔實(shí)例中。

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);
  })
}

我們將能夠看到如下查看器：

扁平化標(biāo)注并保存PDF

Dynamsoft Document Viewer支持四種處理PDF標(biāo)注的方式：

none：丟棄所有標(biāo)注
image：將所有內(nèi)容合并到光柵圖像中
flatten：扁平化所有標(biāo)注
annotation：以可編輯的形式保存標(biāo)注。標(biāo)記為扁平化的單個(gè)標(biāo)注仍將被扁平化

我們可以使用flatten選項(xiàng)保存PDF文件來扁平化所有標(biāo)注。

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

如果我們想在使某些標(biāo)注扁平化的同時(shí)保留某些標(biāo)注的可編輯性，我們可以使用標(biāo)注的扁平化屬性，并使用annotation選項(xiàng)保存PDF。

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

內(nèi)部是如何運(yùn)作的

PDF文件使用PostScript語言描述。我們將使用一些示例來展示扁平化的內(nèi)部操作細(xì)節(jié)。

PDF文件會(huì)包含許多字典，下面是一個(gè)頁面字典的示例：

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
>>
endobj
7 0 obj
<</Filter/FlateDecode/Length 44>>stream
x??41W0 BCc=#S039椝 ?J繅w媹0Tp蒞? 卵	
endstream
endobj

以上頁面引用了以下標(biāo)注字典：

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" style="font-size:16pt;text-align:left;color:#f01314;font-weight:normal;font-style:normal;font-family:'Helvetica';font-stretch:normal;"><p dir="ltr"><span>annotation</span></p></body>)
    /Rect[ 22.1854 112.467 98.423 129.217]
    /Subj()
    /Subtype
    /FreeText
    /T()
>>
endobj

扁平化后，頁面字典將變?yōu)橐韵聝?nèi)容。它不再具有標(biāo)注節(jié)點(diǎn)，并將轉(zhuǎn)換成圖形的標(biāo)注的節(jié)點(diǎn)附加到其正文中。

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頁面中的標(biāo)注扁平化的操作指南的詳細(xì)內(nèi)容，更多關(guān)于JavaScript PDF標(biāo)注扁平化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: