网页在线打开PDF_网站中在线查看PDF之pdf.js

一、pdf.js简介

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。

pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

pdf.js 将 PDF 文档转换为 HTML5 Canvas 元素，并使用 JavaScript 控制文档的呈现和交互。pdf.js 使得不需要在计算机上安装 Adobe Reader 或其他 PDF 阅读器就可以在 Web 上阅读 PDF 文档成为可能。

pdf.js是一个免费的开源软件。

支持谷歌、火狐浏览器，支持pc手机端浏览器。

Git地址：GitHub - mozilla/pdf.js: PDF Reader in JavaScript

官网地址：PDF.js

下载地址：Getting Started

二、pdf.js 使用说明

https://mozilla.github.io/pdf.js/examples/

中文使用介绍整理：

简介 - PDF.js 中文文档

三、pdf.js 使用Demo案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../build/pdf.js"></script><style>html,body {padding: 0px;margin: 0px;overflow-x: hidden;}</style>
</head><body><div id="container"></div><script>var container, pageDiv, pdfDoc;var winWidth = window.innerWidth;function getPDF(url) {pdfjsLib.getDocument(url).promise.then((pdf) => {pdfDoc = pdf;container = document.getElementById('container');for (var i = 1; i <= pdf.numPages; i++) {renderPDF(i);}})}function renderPDF(num) {pdfDoc.getPage(num).then((page) => {var scale = winWidth / (page.getViewport({ scale: 1 }).width);var viewport = page.getViewport({ scale: scale });console.info(viewport);pageDiv = document.createElement('div');pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1));pageDiv.setAttribute('style', 'position: relative');container.appendChild(pageDiv);var canvas = document.createElement('canvas');pageDiv.appendChild(canvas);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});}getPDF('compressed.tracemonkey-pldi-09.pdf');</script>
</body></html>

展示效果：