JavaWeb：在浏览器预览PDF的方法，超级简单

最新推荐文章于 2025-06-28 13:28:09 发布

Oracion_wj

最新推荐文章于 2025-06-28 13:28:09 发布

阅读量3.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： PDF预览 pdfjs

本文链接：https://blog.youkuaiyun.com/u014701246/article/details/75221810

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用PDF.js轻松实现网页中PDF文件的预览功能。只需几个简单步骤即可在浏览器内加载并查看PDF文档。

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

用PDFjs预览pdf文件，简单实用

PDF.js是一款基于HTML5建立的PDF阅读器，兼容大部分主流的浏览器，使用起来，也异常的暴力简单（主要是因为看不懂源码，只知道在使用时加个参数就好了

）。

使用的步骤：

1.建立一个web工程，把PDF.js丢进去

PDF.js 可以在官网上下载：http://mozilla.github.io/pdf.js/

也可以在我的项目中复制出来

2.在HTML文件下编写JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" onclick="openPDF()" value="点我"/>
<script>
    function openPDF(){
        var url="/pdfjsDemo/demo.pdf";
        window.open("pdfjs/web/viewer.html?file="+url);
    }
</script>
</body>
</html>

3.演示：

4.PDFjs文件目录：

├── LICENSE
├── build/
│   ├── pdf.js                             - display layer
│   └── pdf.worker.js                      - core layer
└── web/
    ├── cmaps/                             - character maps(required by core)
    ├── compatibility.js                   - polyfills for missing features
    ├── compressed.tracemonkey-pldi-09.pdf - test pdf
    ├── debugger.js                        - helpful pdf debugging features
    ├── images/                            - images for the viewer and annotation icons
    ├── l10n.js                            - localization
    ├── locale/                            - translation files
    ├── viewer.css                         - viewer style sheet
    ├── viewer.html                        - viewer html
    └── viewer.js                          - viewer layer

如果不去改源码的话，我们只需要用到viewer.html一个文件

5.源码下载地址：

我用是idea创建的项目，idea可以直接导入，如果是eclipse，自己建个web项目，然后把web下文件复制下哈

http://download.youkuaiyun.com/detail/u014701246/9901064