Javascript 如何使pdf.js上的文本呈现为可选

所以，我有一个模式的PDF，我用PDF.js呈现了它，我的主要目标是从呈现的pdf中 Select 文本并将其提取到控制台中，但是我的第一个问题是使pdf.js呈现为可 Select 的.

我try 在pdf.js目录中使用viewer.html.我只需要弄清楚如何使文本层可选，如果我做的一切权利.

以下是我的代码:

{% extends 'base.html' %}

{% block title %}Get Started{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<style>
    #get-started-page {
        text-align: center;
        margin-top: 50px; /* Add margin-top for space */
    }
    .get-started-card {
        margin: auto;
        margin-bottom: 50px;
        padding: 20px;
        text-align: left; /* Align text to the left */
    }
    .get-started-btn {
        margin-top: 10px; /* Add margin-top for space below the input */
    }
    .modal-body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80vh; /* Adjust the height of the modal body */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds the modal height */
    }

    #the-canvas {
        max-width: 100%; /* Make sure the canvas doesn't exceed its container */
        max-height: 100%; /* Make sure the canvas doesn't exceed its container */
    }

    .textLayer {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        --scale-factor: 1; /* Set the --scale-factor CSS variable */
    }
</style>

<section id="get-started-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card bg-dark text-white transparent-card get-started-card">
                    <div class="card-body">
                        <h2 class="text-center mb-4">Get Started with IntelliQuest</h2>
                        <div class="mb-3 centerrrrr">
                            <label class="form-label">Upload PDF</label>
                            <div>
                                <input type="file" accept=".pdf" id="pdfInput" />
                            </div>
                            <button type="button" class="btn btn-primary get-started-btn" id="uploadButton">Upload PDF</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Bootstrap Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfModalLabel">Full-size PDF (Page 1 of 1)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <canvas id="the-canvas"></canvas>
                <div class="textLayer"></div>
            </div>
            <!-- Add navigation buttons inside the modal -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="prevPageBtn">Previous Page</button>
                <button type="button" class="btn btn-secondary" id="nextPageBtn">Next Page</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.js" integrity="sha512-dfMpvQclalfL7nRtHdy4+U2GLYb2XJJOgGLgKibrbcbarI/ZLgCAaBCS6+AuWN0OtLn/zFpu+Cggd8TCBYx9Ag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    // Set the worker source for PDF.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.js';

    function handleUpload() {
        var fileInput = document.getElementById('pdfInput');
        var uploadButton = document.getElementById('uploadButton');

        uploadButton.addEventListener('click', function () {
            var file = fileInput.files[0];

            if (file) {
                var pdfUrl = URL.createObjectURL(file);

                loadPdf(pdfUrl);
            } else {
                alert('Please select a PDF file for upload.');
            }
        });
    }

    function loadPdf(url) {
        pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            var canvas = document.getElementById('the-canvas');
            var textLayer = document.querySelector(".textLayer");
            var ctx = canvas.getContext('2d');
            var scale = 1;

            function renderPage(num) {
                pdfDoc.getPage(num).then(function (page) {
                    var viewport = page.getViewport({ scale: scale });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    page.render(renderContext);

                    // Enable text selection on the canvas
                    canvas.style.userSelect = 'text';

                    // Show text layer
                    pdfjsLib.textLayer.render({
                        textContent: page.getTextContent(),
                        container: textLayer,
                        viewport: viewport,
                        textDivs: []
                    });
                });
            }

            var numPages = pdfDoc.numPages;
            var pageNum = 1;

            renderPage(pageNum);

            document.getElementById('prevPageBtn').addEventListener('click', function () {
                if (pageNum > 1) {
                    pageNum--;
                    renderPage(pageNum);
                }
            });

            document.getElementById('nextPageBtn').addEventListener('click', function () {
                if (pageNum < numPages) {
                    pageNum++;
                    renderPage(pageNum);
                }
            });

            var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
            pdfModal.show();
        });
    }

    handleUpload();
</script>
{% endblock %}

有没有关于如何使PDF可选的提示？