// サンプル：検索した文字列をハイライト注釈で強調表示する
window.onload = function () {
const viewer = new DsPdfViewer("#viewer", {
workerSrc: "/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings(),
restoreViewStateOnLoad: false,
language: "ja"
});
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
var pdf = "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/wetlands.pdf";
loadPdf(viewer, pdf, "wetlands"); // PDFを読み込み、文字列"wetlands"を検索します
}
// PDFを読み込み、特定の文字列で検索後、その文字列をハイライト表示する処理
async function loadPdf(viewer, pdf, searchText) {
// ドキュメントを開きます
await viewer.open(pdf);
// 必要に応じて検索条件を設定します
var findOptions = {
Text: searchText,
MatchCase: true, // 大文字・小文字を区別する
WholeWord: true, // 単語単位で検索
StartsWith: false, // 単語の先頭に限らない
EndsWith: false, // 単語の末尾に限らない
Wildcards: false, // ワイルドカードは使用しない
Proximity: false, // 近接検索を行わない
SearchBackward: false, // ドキュメントの最初から正順で検索する
HighlightAll: false // 検索結果をハイライト表示しない
};
// 検索を開始します
var searchIterator = await viewer.searcher.search(findOptions);
// 検索結果を配列に格納します
var searchResult = await searchIterator.next(); // 最初の検索結果を取得
var searchResults = [];
while (!searchResult.done) {
searchResults.push(searchResult); // 検索結果を配列に格納
searchResult = await searchIterator.next(); // 次の検索結果を取得
}
// それぞれの検索結果文字列にハイライト注釈を設定します
createHighlights(viewer, searchResults);
}
// 検索結果に対してハイライト注釈を設定する処理
async function createHighlights(viewer, searchResults) {
for (let i = 0; i < searchResults.length; i++) {
const searchResultValue = searchResults[i].value;
await viewer.addAnnotation(searchResultValue.PageIndex, {
annotationType: 9,
subtype: "Highlight",
color: [255, 63, 127], // 注釈色 (RGB)
rect: searchResultValue.coordinates.outerRect // テキストの矩形座標
});
}
viewer.repaint(); // 注釈を表示するため、ビューワを再描画
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>コードによるテキストマークアップ注釈の追加</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/demos/resource/js/init.js"></script>
<script src="src/app.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer {
height: 100%;
}
body {
overflow: hidden;
}
