pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式

最新推荐文章于 2025-07-04 15:30:00 发布

原创最新推荐文章于 2025-07-04 15:30:00 发布 · 1.6w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#pdf.js #在线预览下载pdf

● 各种插件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用ViewerJS和PDF.js库在线预览和下载PDF文件。ViewerJS依赖于Mozilla的PDF.js和WebODF。实现方式包括将PDF.js文件夹放在项目服务器目录下（无需打包但无法自定义）和放置在项目静态文件夹下（可DIY但增加打包内容）。此外，还提及了通过window.open和iframe嵌入预览的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewerJS简介

ViewerJS的繁重工作是由这些令人敬畏的项目完成的：

PDF.js（由Mozilla提供）

WebODF（由KO GmbH提供）

运行ViewerJS就像创建链接一样简单。您可以使用它来提供全屏演示，也可以用于在您的网站中内嵌显示文档或作为文档链接的查看器。由于浏览器保护自己免受安全风险（这是一件非常好的事情）的方式，ViewerJS仅适用于驻留在您自己的服务器上的文档。ViewerJS是完整且独立的 - 它不依赖于其他服务。官网地址：https://viewerjs.org/instructions/

两种方式都需要做的事：

1，下载PDF.js， http://mozilla.github.io/pdf.js/getting_started/#download

2，将解压出来的三个文件，放入到一个自定义名称的文件夹中，如文件夹命名为pdfjs

使用起来其实只有几句代码：

方式一：将 pdfjs 文件夹放到项目服务器目录下

优点：项目不需要增加打包内容

缺点：无法DIY

let prefixUrl = 'https://域名/pdfjs文件夹的目录路径/web/viewer.html?file=';
let pdfurl = 'https://域名/显示的pdf文件路径/'+ test.pdf;
window.open(prefixUrl + pdfurl)
// window.open(prefixUrl + encodeURIComponent(pdfurl)); 本地需要跨域

参考来源：https://blog.youkuaiyun.com/bianliuzhu/article/details/80622215

方式二：将 pdfjs 文件夹放到项目static文件夹下

优点：可以DIY

缺点：增加项目打包内容

let prefixUrl = '/static/pdfjs/web/viewer.html?file=';
let pdfurl = 'https://域名/显示的pdf文件路径/'+ test.pdf;
window.open(prefixUrl + pdfurl)

参考来源：https://blog.youkuaiyun.com/chen_3010/article/details/64126273

除了使用window.open打开新页面显示，还可以嵌入iframe，如

<iframe :src="currentUrl" id="iframe"></iframe>