如何在项目中使用pdf.js查看PDF文件

最近在做后台管理类的系统，需要在web页面阅读pdf文件。发现一个很好用的插件 pdf.js，简单的介绍一下

官方文档地址：http://mozilla.github.io/pdf.js/
在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html

介绍一下官网的例子

页面引入pdf.js
使用PDFJS.getDocument(‘helloworld.pdf’)方式加载要打开的PDF文件
通过Promise的then方式处理后续的方法

PDFJS.getDocument('helloworld.pdf')
.then(function(pdf){//you can now use *pdf* here
});
pdf.getPage(1).then(function(page){// you can now use *page* here//;加载PDF的第一页})

通过h5的canvas进行展示。

var scale = 1.5;  //缩放比例//获取窗口大小
var viewport = page.getViewport(scale); //获取canvas对象
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;  var renderContext = {  canvasContext: context,  viewport: viewport
};
page.render(renderContext);

下面完整的例子：

页面部分：

<h1>PDF.js Previous/Next example</h1>  <div>  <button id="prev">Previous</button>  <button id="next">Next</button>  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>  <canvas id="the-canvas"></canvas>

js部分：


//引入pdf.js之后
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
//加载核心文件
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';  var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {  console.log('PDF loaded');  var pageNumber = 1;  pdf.getPage(pageNumber).then(function(page) {  console.log('Page loaded');  var scale = 1.5;  var viewport = page.getViewport(scale);  var canvas = document.getElementById('the-canvas');  var context = canvas.getContext('2d');  canvas.height = viewport.height;  canvas.width = viewport.width;  var renderContext = {  canvasContext: context,  viewport: viewport  };  var renderTask = page.render(renderContext);  renderTask.then(function () {  console.log('Page rendered');  });  });
}, function (reason) {  console.error(reason);
});

具体使用方式可以查阅官方文档，demo写的很详细。

如何在项目中使用pdf.js查看PDF文件相关推荐

Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具 ...
html 提取pdf,使用PDF.js从PDF中提取文本(2019)
正如标题所说,我正在尝试使用由Mozilla维护的PDF.js从PDF中提取文本.我知道前面关于stackoverflow的问题,但我不知道从哪里开始. 我试着跟着这个 article 这件事我需要帮 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆
原文链接: 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆上一篇: tailwindcss 简单场景和官方案例下一篇: git Submodule 将别人的模型文件通 ...
react项目中使用three.js（解决纹理贴图路径问题）
一,本文解决如下问题 1. 在react脚手架的项目中使用three.js 2. three.js在react中使用动态的纹理贴图遇到的路径问题 3. this.指向的丢失问题二,在项目中使用thr ...
Vue3 + PDF.js 实现 PDF 预览
文章目录 1 前言 2 PDF 预览测试 2.1 下载 PDF.js 2.2 window.open 直接打开 2.3 弹框形式打开 3 修改配置项 3.1 修改主题色为暗色系 3.2 修改默认语言为 ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...
vue里使用pdf.js实现pdf文件的预览功能
引言:经过上一篇文章的测试,发现了以下问题: 兼容性不好不适用多语言场景(不能共用一套) 会出现跨域问题难于监控阅读状态不能控制下载状态在基于vue开发的移动项目中,如果预览的pdf数量不是很 ...

如何在项目中使用pdf.js查看PDF文件

页面部分：

js部分：

如何在项目中使用pdf.js查看PDF文件相关推荐

最新文章

热门文章