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

本文主要是基于在官网下载pdf.js文件包,然后引入,模拟一个上传操作,从前端直接进行加载解析。
整个demo代码(包含pdf包文件)请看百度网盘:
链接:
https://pan.baidu.com/s/17EEmDNyND6PjgZvjyjSzOQ
提取码:jts6
1、 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第1张图片
2 修改viewer.js代码
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第2张图片
this.textLayer.textContentItemsStr 为pdf中的具体内容,是一个数组
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第3张图片
如果需要对数据操作,可以在这个定时器中进行更改代码

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

pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第4张图片
每上传一个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>

效果图:
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第5张图片
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第6张图片
打开控制台:
pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式)_第7张图片
说明:
这里是模拟上传操作,所以将pdf放在了test.html同级目录,这里也就可以直接用文件名作为url。 实际项目中,这里url换成pdf文件所在的地址。

在使用的可以将主要文件放在自己项目中进行使用。

你可能感兴趣的:(pdf.js-----js解析pdf文件实现预览,并获取pdf文件中的内容(数组形式))