文档地址:
https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website
翻译:
在网站上建立 pdf.js
1.可以使用已经预先构建的版本(pre-build)
1>通过npm
npm isntall pdfjs-dist --save
简单示例:
require('pdfjs-dist');
var fs = require('fs');
var data = new Uint8Array(fs.readFileSync('helloworld.pdf'));
PDFJS.getDocument(data).then(function(pdfDocument){
console.log('页面总数:' + pdfDocument.numPages);
});
根据您希望使用的API,您可能需要填充一些DOM API。
更复杂的例子:
https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.js
(examples下就是各种示例,有时间了可以看看)
2>通过webpack
在你的项目中添加依赖:
npm install pdfjs-dist --save-dev
在项目中使用
1.引入pdf.js依赖:
require('pdfjs-dist')
2.pds.js的worker文件,被构建在 './node_modules/pdfjs-dist/build/pdf.worker.entry.js',可能是一个 'bundel' 或一个 'file'。通过下面引入:
require(pdfjs-dist/build/pdf.worker)
3.PDFJS.workerSrc路径需要指向到 worker文件目录
可以使用 'pdfjs-dist/webpack' 模块来自动配置 PDF.js
可以查看示例:
https://github.com/mozilla/pdf.js/blob/master/examples/webpack
/*
看了点代码:
var pdfjsLib = require('pdfjs-dist');
var pdfPath = '../helloworld/helloworld.pdf';
// Setting worker path to worker bundle.
pdfjsLib.PDFJS.workerSrc = '../../build/webpack/pdf.worker.bundle.js';
*/
3>通过browserify
npm install pdfjs-dist --save-dev
同 webpack很类似,例子同样也在一起
/*
原谅我,对npm、webpack这些不太熟悉。。。了解过也忘记了。。。,
*/
从实例开始:
当PDF.js源码修改时,在线的demo会自动更新(http://mozilla.github.io/pdf.js/web/viewer.html)
所有的演示文件的源码,可以很容易在 'https://github.com/mozilla/pdf.js/tree/gh-pages' 访问到。这些文件也可以上传到我们自己的服务器上,来通过PDF.js来显示我们网站的PDF文件(这里应该就可以当做我们使用pdf.js的实例来查看)
1.下载 'https://github.com/mozilla/pdf.js/archive/gh-pages.zip'
2.解压下载的zip包,会创建一个 'pdf.js-gh-pages/' 目录
3.将下面的目录,复制到我们的网站
pdf.js-gh-pages/build/
pdf.js-gh-pages/web/ // 包含一个1M的PDF文件,用于测试,可以直接安全删除
4.通过pdf.js,在我们网站上打开PDF文件,只需要访问 'PDF查看器' 的链接即可!
我们自己的网站目录/pdf目录/web/viewer.html // 会打开默认的pdf文件
可以通过传递 'file' 参数,来打卡不同的pdf文件,例如:
/web/viewer.html?file=dongxuemin.pdf
PDF查看器(viewer)构建在 '显示层(display layer)' 上,而且同 Firefox和其他浏览器扩展的UI界面。它是我们构建自己的PDF查看器的一个很好的起点。但是它仅仅是一个未修饰的版本,确定在我们的站点使用它,最好重新换个皮肤或者在它上面进行修改!
2.从源码包自己构建
clone xxx // 克隆
gulp generic // 构建,将会创建一个 'build/' 目录,同上面一样,可以直接上传到服务器使用