Question

我有一个正在尝试工作的PDF.js项目。不幸的是，该库使用了node.js（正如我最终从所有require语句中弄清楚的那样）。直到今天我才使用过node.js。

我安装了node.js，并通过了w3schools教程来使其运行。现在，我正在尝试将其扩展到我的项目中，但再次得到“要求未定义”！

我在Windows cmd shell中像这样启动node.js服务器：

C：\ Users \ Greg \ NodeJS_Hello_World \ WebApplication1 \ web>节点pdfjs-start.js

这是pdfjs-start.js：

const http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function(req, res) {
    var q = url.parse(req.url, true);
    var filename = "." + q.pathname;
    console.log(filename);
    fs.readFile(filename, function(err, data) {
        if (err) {
            res.writeHead(404, {'Content-Type': 'text/html'});
            return res.end("404 Not Found");
        }  
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        return res.end();
    });

}).listen(9080, "");

我尝试通过这样的Chrome浏览器运行项目：

http://localhost:9080/index.html

失败

未定义getDocument

这是index.html：

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #canvas_container {
                    width: 800px;
                    height: 450px;
                    overflow: auto;
                }
            </style>            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            <script type="module" src="pdf.js/src/pdf.js"></script>
            <script type="module" src="pdf.js/src/pdf.worker.js"></script>
            <script type="module" src="pdf.js/web/pdf_viewer.js"></script>
            <script type="module" src="pdf.js/web/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) {
            getDocument(drawingName).then((pdf) => {
                myState.pdf = pdf;
                render();
            });     
            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 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
                });
            });
        }

        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>

那么为什么没有定义getDocument？如果我查看其中包含的pdf.js，就会发现其中包含

exports.getDocument = pdfjsDisplayAPI.getDocument;

如果我在index.html中这样做：

        var p = require('./pdf.js/src/pdf.js');
        p.getDocument(drawingName).then((pdf) => {
            myState.pdf = pdf;
            render();
        });

然后失败

未定义要求

Chrome调试器控制台显示：

无法加载模块脚本：服务器回应为非JavaScript MIME类型的“文本/ html”。严格的MIME类型检查是根据HTML规范对模块脚本强制执行。

任何nodejs专家都可以告诉我发生了什么事

Answer 1

如果在浏览器中使用<script type=module>，则需要使用import，而不是require：

import {getDocument} form './pdf.js/src/pdf.js'

浏览器不支持require，如果您使用Webpack或Babel之类的工具进行转换，则只能在前端代码中使用require。新的浏览器支持模块和import而不进行编译。

nodejs“要求未定义”

1 个答案: