Question

有人可以提供最近的工作示例吗？我一直在尝试让我在Google上发现的许多示例之一可以工作一周，但没有一个可以工作。他们中的大多数人都忽略了关键信息，例如他们正在使用的pdf.js版本。它们都已经使用了几年了，从那时起基础库代码就发生了变化。

我能够加载和查看pdf，但无法从中选择文本。

我只是想加载一个drawing.pdf，查找并突出显示其中的一些文本，然后放大它。我不希望使用具有自己的工具栏或iframe的现有查看器的解决方案。

有些代码应该可以运行，但是在使用

的Chrome浏览器中会失败

“未定义PDFViewer”

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #canvas_container {
                width: 800px;
                height: 450px;
                overflow: auto;
            }
        </style>
        <link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/pdf_viewer.js"></script>

    </head>
    <body>
        <div>TODO write content</div>
        <div id="my_pdf_viewer">
            <div id="canvas_container">
                <canvas id="pdf_renderer"></canvas>
            </div>                      
        </div>

    <script>
    var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    };

    this.loadPdfDrawing = function(drawingName) {
        pdfjsLib.getDocument(drawingName).then((pdf) => {
            myState.pdf = pdf;
            render();
        });     
    };

    function render() {
        myState.pdf.getPage(myState.currentPage).then((page) => {
            var canvas = document.getElementById("pdf_renderer");
            var ctx = canvas.getContext('2d');

            var viewport = page.getViewport(myState.zoom);
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            page.render({
                canvasContext: ctx,
                viewport: viewport
            });
        });
    }

    var container = document.getElementById('my_pdf_viewer');
    var viewer = document.getElementById('canvas_container');

    var pdfViewer = new PDFViewer({ 
        container: container,
        viewer: viewer
    });

    var pdfFindController = new PDFFindController({
        pdfViewer: pdfViewer
    });

    pdfViewer.setFindController(pdfFindController);

    function findText(text) {
        pdfFindController.executeCommand('find', {
            caseSensitive: false, 
            findPrevious: undefined,
            highlightAll: true, 
            phraseSearch: true, 
            query: text
        });
    }

    document.addEventListener("DOMContentLoaded", function(event) { 
        loadPdfDrawing('386-5001.pdf');
        findText('12.000');
    });

    </script>
    </body>
</html>

拒绝执行脚本 'https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js' 因为它的MIME类型（'text / plain'）不可执行，并且严格 MIME类型检查已启用。 index.html：1拒绝执行脚本从 'https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js' 因为它的MIME类型（'text / plain'）不可执行，并且严格 MIME类型检查已启用。 index.html：1拒绝执行脚本从 'https://raw.githubusercontent.com/mozilla/pdf.js/master/web/pdf_viewer.js' 因为它的MIME类型（'text / plain'）不可执行，并且严格 MIME类型检查已启用。

如何使用PDF.js搜索文本？

0 个答案: