我有一个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:
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浏览器上运行该项目,如下所示:
但却失败了
未定义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类型的"text/html“。根据HTML规范,对模块脚本实施严格的MIME类型检查。
能告诉我发生了什么的nodejs专家吗?
发布于 2019-03-30 00:03:05
如果在浏览器中使用<script type=module>
,则需要使用import
,而不是require
。
import {getDocument} form './pdf.js/src/pdf.js'
浏览器不支持require
,只有在前端代码中才能使用require
,如果您使用Webpack或Babel这样的工具传输。新的浏览器支持模块和import
,不需要外溢。
https://stackoverflow.com/questions/55426649
复制相似问题