我们在制作网站时，有时候需要在项目中使用在线浏览PDF文件的功能，使用pdf.js可以实现这一功能，以下是青锋建站给大家分享的pdf在线浏览插件pdf.js使用说法与举例。

pdf.js在线演示

https://mozilla.github.io/pdf.js/web/viewer.html

pdf.js浏览器扩展

Firefox

PDF.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使用举例说明

'Hello, world!' example

'Hello, world!' example

//假如从远程服务器提供了绝对网址，配置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);

});

});

JavaScript code:

document.getElementById('code').textContent =

document.getElementById('script').text;

以上就是青锋建站给大家分享的pdf在线浏览插件的使用与举例。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。