HTMLファイル (index.html) 例


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>PDF Highlighter</title>
    <style>
        .highlight {
            background-color: yellow; /* ハイライト用の背景色 */
        }
        #keyword-list {
            margin-top: 20px;
            font-size: 1.2em;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>PDFドキュメントのハイライト表示</h1>
    <canvas id="pdf-canvas"></canvas>
    <div id="keyword-list">
        <h2>ハイライトされたキーワード</h2>
        <ul id="keywords"></ul>
    </div>

    <!-- PDF.js ライブラリの読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <!-- jQueryの読み込み（任意） -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイル (script.js) 例

// PDF.js 設定
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';

// ハイライト対象のキーワード
const keywords = ["example", "sample", "highlight"];

// PDFのURL（業務で使うファイルのパスに変更してください）
const pdfUrl = 'your-pdf-url.pdf';

// PDFをHTML上に描画し、キーワードをハイライト
function renderAndHighlightPDF() {
    const loadingTask = pdfjsLib.getDocument(pdfUrl);

    loadingTask.promise.then(pdf => {
        // 各ページを順に処理
        for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
            pdf.getPage(pageNumber).then(page => {
                const scale = 1.5;
                const viewport = page.getViewport({ scale });

                // canvasを用意してページをレンダリング
                const canvas = document.getElementById('pdf-canvas');
                const context = canvas.getContext('2d');
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                page.render(renderContext).promise.then(() => {
                    // ページのテキストを抽出
                    page.getTextContent().then(textContent => {
                        const textItems = textContent.items;
                        let highlightedText = "";

                        textItems.forEach(item => {
                            let text = item.str;

                            // キーワードが含まれているかチェック
                            keywords.forEach(keyword => {
                                if (text.includes(keyword)) {
                                    // ハイライト用のHTMLに変換
                                    text = text.replace(keyword, `<span class="highlight">${keyword}</span>`);
                                    addKeywordToList(keyword);  // キーワードをリストに追加
                                }
                            });

                            highlightedText += text + " ";
                        });

                        // 抽出したテキストをHTMLに挿入（ここでハイライト済み）
                        const div = document.createElement('div');
                        div.innerHTML = highlightedText;
                        document.body.appendChild(div);
                    });
                });
            });
        }
    });
}

// ハイライトされたキーワードをリストに表示
function addKeywordToList(keyword) {
    const keywordList = document.getElementById("keywords");
    if (!Array.from(keywordList.children).some(li => li.textContent === keyword)) {
        const li = document.createElement("li");
        li.textContent = keyword;
        keywordList.appendChild(li);
    }
}

// PDFのレンダリングとハイライトの実行
renderAndHighlightPDF();