个人中心
gpt4 book ai didi

javascript - Node "require not defined"

转载 作者：行者123 更新时间：2023-11-30 19:40:46 25 4
gpt4 key购买 nike

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

我安装了 node.js 并完成了 w3schools 教程以使其运行。现在我试图将它扩展到我的项目，但再次出现“未定义要求”!

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

C:\Users\Greg\NodeJS_Hello_World\WebApplication1\web>node 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 is not defined

这是 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();
        });

然后它失败了

require is not defined

Chrome 调试器控制台显示:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

有没有 nodejs 专家可以告诉我发生了什么事？

最佳答案

如果您使用 <script type=module>在浏览器中，您需要使用 import , 不适用于 require :

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

浏览器不支持require , 你只能使用 require在前端代码中，如果您使用 Webpack 或 Babel 等工具进行转译。新浏览器支持模块和 import无需转译。

关于javascript - Node "require not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55426649/

25 4 0
文章推荐： c# - NancyFx - Razor 编译错误
文章推荐： c - SDL 窗口未正确关闭
文章推荐： javascript - 需要使用 JavaScript 将 JSON 格式转换为另一种 json 格式
文章推荐： c# - 将 opentext 更改为 opendialog
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com