pdf.js安装步骤和使用
从github下载的源码不能直接使用,最好使用命令行下载安装
1、下载源码
git clone git://github.com/mozilla/pdf.js.git
cd pdf.js
2、安装node.js
https://nodejs.org/en/download/
3、安装gulp
sudo npm install -g gulp-cli
4、安装pdf.js的依赖库
sudo npm install
5、启动本地web服务,因为有的浏览器不允许用file://协议打开pdf文件
sudo gulp server
6、构建PDF.js
sudo gulp generic
这将在build / generic / build /目录中生成pdf.js和pdf.worker.js。 这两个脚本都是必需的,但是只有pdf.js需要被包含,因为pdf.worker.js将由pdf.js加载。 PDF.js文件很大,应该细化生产。
也可下载我的构建版本 链接:https://pan.baidu.com/s/1o7AjqaA


7、在项目中引入入构建后的pdf.js
<script type="text/javascript" src="generic/build/pdf.js"></script>
... <canvas id="canvas"></canvas>
$(function(){
var url = '../compressed.tracemonkey-pldi-09.pdf';
PDFJS.workerSrc = 'generic/build/pdf.worker.js';
PDFJS.getDocument(url).then(function getPdf(pdf) {
pdf.getPage(2).then(function getPage(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
});

8、使用viewer.html加载pdf

http://localhost:6443/web/PDFDemo/pdfjs/generic/web/viewer.html?file=../../../swift.pdf
在viewer.html后面跟着file=xxx.pdf,可以直接用viewer.html渲染pdf,这种方式附带pdf工具栏

pdf.js安装步骤和使用的更多相关文章
- 【Node.js安装步骤】
"Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详 ...
- node.js安装步骤
首先这是node.js的官网:https://nodejs.org/en/ 截至2017年12月9日,node更新在8.9.3该版本,建议开发人员下载6.0以上版本,8以上不是很稳定! 如果有其他需 ...
- node.js 安装步骤
1.打开链接(http://nodejs.cn/download/) 2.下载自己所需的安装包(32位 or 64位.哪个系统) 3.双击直接安装(成功如下图) 4.点击 Node.js comman ...
- PDF.js Electron Viewer
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...
- node.js和express.js安装和使用步骤 [windows]
PS: NODEJS:https://nodejs.org NPM:https://www.npmjs.com/ 一.node.js安装与配置 到https://nodejs.org/en/downl ...
- Node.js安装详细步骤教程(Windows版)
什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- [转]phoneGap3.0安装步骤(以windows下的android环境为例):
phoneGap3.0安装步骤(以windows下的android环境为例): 环境: WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova) ...
- pdf.js使用教程
pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 据说IE9以上 ...
随机推荐
- 便捷编程-Xcode常用第三方插件 (随时更新)
Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...
- 开创学习的四核时代-iTOP-4412开发板开源硬件平台
iTOP-4412开发板如今比較热门的开发板.笔者最近入了一套. 也推荐给初学ARM的朋友学习,4412开发板搭载三星Exynos四核处理器,配备1GB内存,4GB固态硬盘EMMC存储,兼具高速读取与 ...
- js --- 事件流
1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标 ...
- 怎么成为合格的WEB前端开发工程师
web前端开发工程师目前来讲是一个热门职位,但是要成为一个合格的web前端开发工程师,需要掌握的知识可不少,零度就简单的为大家讲讲. 大致的来讲,web前端开发工程师需要掌握的知识有:HTML.CSS ...
- 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)
memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...
- #学习笔记#——JavaScript 数组部分编程(六)
14. 题目描述 实现一个打点计时器,要求 1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1 2.返回的对象中需 ...
- c# winform 技术提升
http://www.cnblogs.com/junjie94wan/category/303961.html http://www.cnblogs.com/springyangwc/archive/ ...
- Mysql学习总结(17)——MySQL数据库表设计优化
1.选择优化的数据类型 MySQL支持很多种不同的数据类型,并且选择正确的数据类型对于获得高性能至关重要.不管选择何种类型,下面的简单原则都会有助于做出更好的选择: (1).更小通常更好 一般来说,要 ...
- 信号 signal sigaction补充
目前linux中的signal()是通过sigation()函数实现的. 由signal()安装的实时信号支持排队,同样不会丢失. 先看signal 和 sigaction 的区别: 关键是 stru ...
- POJ 题目1145/UVA题目112 Tree Summing(二叉树遍历)
Tree Summing Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8132 Accepted: 1949 Desc ...