如何在浏览器中使用原生 JavaScript 显示 PDF 文件🤯
昨天我想知道如何在网站上显示PDF文档。
我尝试在iframe移动设备上显示文档，但不起作用😔。
经过一段时间的寻找，我终于找到了使用 Mozilla PDF.js 库的解决方案😏。
Mozilla PDF.js
一个基于 Web 标准的通用型 PDF 解析和渲染平台。
Mozilla 的 PDF.js 项目是一个开源项目，采用 Apache 2 许可证，因此几乎可以在任何应用程序中使用。
该图书馆基本上只允许我们在浏览器中打开 PDF 文件。
如果您仔细查看浏览器的用户界面，您会发现它与 Mozilla Firefox 中的界面相同，如果您在浏览器中打开 PDF 文件的话。
浏览器演示版本可通过此链接获取。
但是，如果您的应用程序不需要所有这些功能，则可以选择使用 PDF.js API。
如何构建 PDF 渲染器
首先，我们需要将 PDF.js 库添加到我们的网站中，我们只需一行简单的代码即可完成。
我使用的是 PDF.js 版本 2.0.943。其他版本可能会对 API 进行更改。
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
我们的应用程序将包含导航键，通过这些键我们可以跳转到下一页、上一页以及放大或缩小文档。
<div class="pdf-toolbar">
<div id="navigation_controls">
<button class="pdf-toolbar-button" id="previous">Previous</button>
<input class="pdf-input" id="current_page" value="1" type="number"/>
<button class="pdf-toolbar-button" id="next">Next</button>
</div>
<div id="zoom_controls">
<button class="pdf-toolbar-button" id="zoom_in">+</button>
<button class="pdf-toolbar-button" id="zoom_out">-</button>
</div>
</div>
我们的 PDF 文档显示在 canvas 元素中，因此我们需要将其嵌入。
<div id = "canvas_container">
<canvas id = "pdf_renderer"> </canvas>
</div>
现在我们来添加一些 JavaScript 代码。
var defaultState = {
pdf: null,
currentPage: 1,
zoom: 1
}
// GET OUR PDF FILE
pdfjsLib.getDocument('file.pdf').then((pdf) => {
defaultState.pdf = pdf;
render();
});
// RENDER PDF DOCUMENT
function render() {
defaultState.pdf.getPage(defaultState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(defaultState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
// FUNCTION GO TO PREVIOUS SITE
document.getElementById('previous').addEventListener('click', (e) => {
if (defaultState.pdf == null || defaultState.currentPage == 1)
return;
defaultState.currentPage -= 1;
document.getElementById("current_page").value = defaultState.currentPage;
render();
});
// FUNCTION GO TO PREVIOUS NEXT
document.getElementById('next').addEventListener('click', (e) => {
if (defaultState.pdf == null || defaultState.currentPage > defaultState.pdf._pdfInfo.numPages)
return;
defaultState.currentPage += 1;
document.getElementById("current_page").value = defaultState.currentPage;
render();
});
// FUNCTION GO TO CUSTUM SITE
document.getElementById('current_page').addEventListener('keypress', (e) => {
if (defaultState.pdf == null) return;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { // ON CLICK ENTER GO TO SITE TYPED IN TEXT-BOX
var desiredPage =
document.getElementById('current_page').valueAsNumber;
if (desiredPage >= 1 && desiredPage <= defaultState.pdf._pdfInfo.numPages) {
defaultState.currentPage = desiredPage;
document.getElementById("current_page").value = desiredPage;
render();
}
}
});
// FUNCTION FOR ZOOM IN
document.getElementById('zoom_in').addEventListener('click', (e) => {
if (defaultState.pdf == null) return;
defaultState.zoom += 0.5;
render();
});
// FUNCTION FOR ZOOM OUT
document.getElementById('zoom_out').addEventListener('click', (e) => {
if (defaultState.pdf == null) return;
defaultState.zoom -= 0.5;
render();
});
我们现在创建了一个页面，可以在任何设备上显示任何 PDF 文件，而无需下载。
这是最终版本的样子。
如果你的作品集中有PDF格式的简历，现在可以在浏览器中查看了。
希望这篇指南对您有所帮助，想要了解更多内容，可以关注我的推特账号。
文章来源：https://dev.to/patik123/how-show-pdf-in-vanilla-javascript-in-browser-2o10