pdf.js-----js解析pdf文件实现预览，并获取pdf文件中的内容(数组形式)

前端PDF解析实践

最新推荐文章于 2025-10-05 12:49:28 发布

原创最新推荐文章于 2025-10-05 12:49:28 发布 · 1.5w 阅读

19 ·

CC 4.0 BY-SA版权

本文介绍如何使用pdf.js插件在前端实现PDF文件的上传与解析，通过修改viewer.js代码来获取PDF内容，并提供了完整的demo代码及运行效果。

本文主要是基于在官网下载pdf.js文件包，然后引入，模拟一个上传操作，从前端直接进行加载解析。
整个demo代码（包含pdf包文件）请看百度网盘：
链接：
https://pan.baidu.com/s/17EEmDNyND6PjgZvjyjSzOQ
提取码：jts6
1、到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )
在这里插入图片描述
2 修改viewer.js代码

this.textLayer.textContentItemsStr 为pdf中的具体内容，是一个数组

如果需要对数据操作，可以在这个定时器中进行更改代码

3、模拟一个上传界面
在test.html中编写了一个原生的上传事件

在这里插入图片描述
每上传一个pdf，都会打印出数组

也可以直接在地址栏输入文件名字，
http://localhost:63342/pdfjs-2.4.456-es5-dist(1)/web/viewer.html?file=区块链电子发票.pdf
打开控制台，数组也会打印。

代码为

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google" content="notranslate">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>测试获取pdf信息</title>

</head>
<body>
<input id="files1" name="fileupload" type="file" value="" onchange="fileChange()" />
</body>
<script>
  var files1 = document.getElementById('files1');
  function fileChange () {
    console.log(files1.files[0].name)
    var url = files1.files[0].name;
    // window.location.href = "./viewer.html?file=" + url // 当前页打开
    window.open("./viewer.html?file=" + url) // 新界面打开
  }
</script>
</html>