pdf.js在线演示
https://mozilla.github.io/pdf.js/web/viewer.htmlpdf.js浏览器扩展
FirefoxPDF.js内置于Firefox版本19中。
Chrome
Chrome的官方扩展可从ChromeWeb商店安装。此扩展名为@Rob--W.
BuildYourOwn获取下面解释的代码，并发出GulpChromium。然后打开Chrome，转到“工具”>“扩展”，然后从目录构建/铬加载（未打包）扩展名。
下载pdf.js代码
通过GIT方式要获得当前代码的本地副本，请使用git克隆它：
$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js
接下来，通过官方包或NVM安装Node.js。您需要在全球范围内安装GUP包(也请参阅GULP的入门)：
$ npm install -g gulp-cli
如果一切顺利，请安装PDF.js的所有依赖项：
$ npm install
最后，您需要启动本地Web服务器，因为某些浏览器不允许使用file://URL打开PDF文件。运行:
$ gulp server
打开如下网址测试pdf.js
http://localhost:8888/web/viewer.html
请记住，这需要一个与ES6兼容的浏览器；请参阅BuildPDF.js，以便与旧浏览器一起使用。还可以通过打开以下命令查看右侧的所有测试PDF文件：
http://localhost:8888/test/pdfs/?frame
通过CDN方式
PDF.js托管在几个免费的CDN上：
https://www.jsdelivr.com/package/npm/pdfjs-dist
https://cdnjs.com/libraries/pdf.js
https://unpkg.com/pdfjs-dist/
创建pdf.js代码
为了将所有src/文件绑定到两个生产脚本中并构建泛型查看器，请运行：
$ gulp generic
这将在build/generic/build/目录中生成pdf.js和pdf.worker.js。这两个脚本都是必需的，但是只需要包含pdf.js，因为pdf.worker.js将由pdf.js加载。PDF.js文件很大，应该用于生产。
在web应用中使用pdf.js
要在Web应用程序中使用PDF.js，可以选择使用预先构建的库版本或从源代码构建它。我们提供预先构建的版本，以便在pdfjs-Dist名称下使用NPM和Bower。有关更多信息和示例，请参阅有关此主题的wiki页面。更多关于pdf.js的使用与帮助信息：https://mozilla.github.io/pdf.js/pdf.js使用举例说明
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>'Hello, world!' example</title>
</head>
<body>
<h1>'Hello, world!' example</h1>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script id="script">
//假如从远程服务器提供了绝对网址，配置cors在头部
var url = './helloworld.pdf';
// The workerSrc property 应该被明确指定
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
//异步的加载PDF文件
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
//接收第一页
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
//使用PDF页面规格加载画布
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//渲染PDF页面
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
});
});
</script>
<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
document.getElementById('code').textContent =
document.getElementById('script').text;
</script>
</body>
</html>
以上就是青锋建站给大家分享的pdf在线浏览插件的使用与举例。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/pdfjs_1068.html
