如何使 pdf.js 渲染上的文本可选择？

Question

所以，我在模态中有一个 PDF，它是用 PDF.js 渲染的，我的主要目标是从渲染的 pdf 中选择文本并将其提取到控制台中，但是我的第一个问题是由 pdf.js 渲染引起的可选择。

我尝试使用 pdf.js 目录中的viewer.html。我只需要弄清楚如何使文本图层可选，以及我是否做对了一切。

这是我的代码：

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

            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>

关于如何选择 PDF 的任何线索？

Answer 1

问题是模态不是 PDF，它只是 PDF 的画布图像。

PDF.js 基本上是一个 PDF 图像渲染器（可以按设计使用），也可以将从 PDF 中提取的文本放在图像上。

此外，当在框架中使用时，也可以在另一个画布中绘制 PDF，然后工作人员将注释附加到未见过的 PDF 的末尾。