我有一个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浏览器运行该项目，如下所示：
失败了
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类型“text / html”进行响应。对每个HTML规范的模块脚本强制执行严格的MIME类型检查。
任何nodejs专家谁能告诉我发生了什么？
如果您在浏览器中使用<script type=module>，则需要使用import，而不是使用require：
import {getDocument} form './pdf.js/src/pdf.js'
浏览器不支持require，如果您使用Webpack或Babel等工具进行转换，则只能在前端代码中使用require。新浏览器支持模块和import而无需转换。