javascript - 使用 pdf.js 渲染 PDF
问题描述
我是 javascript 新手。我正在尝试使用 pdf.js 呈现 pdf。我得到这个错误:
Parsing Error: Unexpected token const
从此代码:
const url = '../docs/pdf.pdf';
我的代码
const url = '../docs/pdf.pdf';
let pdfDoc = null,
pageNum = 1,
pageIsRendering = false,
pageNumIsPending = null;
const scale = 1.5,
canvas = document.querySelector('#pdf-render'),
ctx = canvas.getContext('2d');
const renderPage = num => {
pageIsRendering = true;
pdfDoc.getPage(num).then(page => {
const viewport = page.getViewport({ scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderCtx = {
canvasContext: ctx,
viewport
};
page.render(renderCtx).promise.then(() => {
pageIsRendering = false;
if (pageNumIsPending !== null) {
renderPage(pageNumIsPending);
pageNumIsPending = null;
}
});
document.querySelector('#page-num').textContent = num;
});
};
const queueRenderPage = num => {
if (pageIsRendering) {
pageNumIsPending = num;
} else {
renderPage(num);
}
};
const showPrevPage = () => {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
};
const showNextPage = () => {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
};
pdfjsLib
.getDocument(url)
.promise.then(pdfDoc_ => {
pdfDoc = pdfDoc_;
document.querySelector('#page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
})
.catch(err => {
const div = document.createElement('div');
div.className = 'error';
div.appendChild(document.createTextNode(err.message));
document.querySelector('body').insertBefore(div, canvas);
document.querySelector('.top-bar').style.display = 'none';
});
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>PDF Viewer</title>
</head>
<body>
<div class="top-bar">
<button class="btn" id="prev-page">
<i class="fas fa-arrow-circle-left"></i> Prev Page
</button>
<button class="btn" id="next-page">
Next Page <i class="fas fa-arrow-circle-right"></i>
</button>
<span class="page-info">
Page <span id="page-num"></span> of <span id="page-count"></span>
</span>
</div>
<canvas id="pdf-render"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="js/main.js"></script>
</body>
</html>
解决方案
推荐阅读
- npm - Should I duplicate "peerDependencies" in "dependencies" field of "package.json"?
- docker - 从 traefik 到 Vultr 的 DNS 挑战
- javascript - 两个按钮中的一个启动滚动,但它们都应该
- c - 如何在 C 运行时获取哪些有问题的源代码和行?
- oracle - 在Oracle中查找某个时期内帐户总和之间的差异
- linux - ubuntu 中的 systemd 文件未按预期运行
- stata - Stata中看似无关的回归后的利润率太慢
- css - JavaFX TabPane:如何制作梯形标签
- javascript - Firebase Firestore - 如何查询两个匹配的“WHERE”子句中的任何一个
- python - 带有循环的 Python 列表 remove() 无法按预期工作