首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >nodejs“要求未定义”

nodejs“要求未定义”
EN

Stack Overflow用户
提问于 2019-03-29 23:27:08
回答 1查看 1.6K关注 0票数 1

我有一个PDF.js项目,我正在努力工作。不幸的是,该库使用node.js (正如我从所有require语句中最终发现的那样)。直到今天我才用过node.js。

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

我在Windows外壳中启动node.js服务器,如下所示:

C:\Users\Greg\NodeJS_Hello_World\WebApplication1\web>node pdfjs-start.js

这里是pdfjs-start.js:

代码语言:javascript
运行
复制
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:

代码语言:javascript
运行
复制
    <!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中这样做:

代码语言:javascript
运行
复制
        var p = require('./pdf.js/src/pdf.js');
        p.getDocument(drawingName).then((pdf) => {
            myState.pdf = pdf;
            render();
        }); 

然后它就失败了

要求未定义

Chrome调试器控制台显示:

加载模块脚本失败:服务器响应非JavaScript类型的"text/html“。根据HTML规范,对模块脚本实施严格的MIME类型检查。

能告诉我发生了什么的nodejs专家吗?

EN

回答 1

Stack Overflow用户

发布于 2019-03-30 00:03:05

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

代码语言:javascript
运行
复制
import {getDocument} form './pdf.js/src/pdf.js'

浏览器不支持require,只有在前端代码中才能使用require,如果您使用Webpack或Babel这样的工具传输。新的浏览器支持模块和import,不需要外溢。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55426649

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档