PDFjs简单使用说明 | 也平凡の博客

type

status

date

slug

summary

一、PDFjs简介

PDF.js 的功能和它的名字一样简单，是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着，没错，就是那个开发了火狐浏览器的 Mozilla。

一般来说，要查看 PDF 文档，我们需要一个 PDF 阅读器软件，而通过 PDF.js 可以在浏览器中直接显示和处理 PDF 文档，无论是在线浏览、存档或者其他基于 PDF 的功能都可以实现。

实际效果：

官网代码下载：

点开后选择modern browsers进行下载

或者在我的github仓库下载：pdfjs

首先要注意我们的PDF文件有两种方法可以带入进viewer.html中展示

如果你的PDF文件mykichen.pdf和viewer.html放在同一个目录下,那么在URL中指定file参数的写法是: http://localhost:8000/viewer.html?file=mykichen.pdf

注意几点: 你只需要写文件名mykichen.pdf,因为viewer.html和pdf文件在同一路径,不需要额外的路径部分。 ?file=mykichen.pdf这一部分是一个URL查询参数,告诉viewer.html需要加载哪个PDF文件。

所以只要保证viewer.html和mykichen.pdf在同一目录,然后正确构造带有file参数的URL,就可以用viewer.html直接打开并展示你的PDF文件了。

以下是实际的展示效果：

如果你的PDF文件放在pdf目录下,而viewer.html文件和pdf目录在同一个目录,那么file参数应该这样写: http://localhost:8000/viewer.html?file=pdf/mykichen.pdf 解释一下:

viewer.html作为入口文件,在URL中直接指定;

pdf/是你PDF文件所在的子目录路径;

mykichen.pdf是你实际的PDF文件名。