PDF预览之PDF.js在网站上建立pdf.js文档翻译

文档地址:
	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/' 目录,同上面一样,可以直接上传到服务器使用


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值