网页在线打开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案例


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

展示效果：

四、pdf.js 在线使用案例

在线阅读器预览：

https://mozilla.github.io/pdf.js/web/viewer.html

使用方案：file=(指定自己的pdf文件地址即可)

下载源码后viewer.html文件就是在线阅读器。

https://mozilla.github.io/pdf.js/web/viewer.html?file=指定自己的pdf地址

更多：

网页在线打开PDF_网站中在线查看PDF之TouchPDF

JS实现网页选取截屏保存+打印功能(转)

echarts中国地图使用整理

相关阅读:
神奇的 perfma：一站式解决所有 JVM 疑难杂症！
技术学习群-第二周内容共享
网络安全的学习方向和路线是怎么样的？
VUE搭建云音乐播放器（App版本）
10分钟教对象搭建了一个多人聊天室~
我国智慧燃气建设应用过程中，有哪些关键问题？
电池单体一致性云端算法整理
Tomcat 启动闪退问题解决方法
虚拟化与Docker
1.两数之和（哈希）

原文地址：https://blog.csdn.net/u011127019/article/details/133847939