本文主要是基于在官网下载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>
效果图:
打开控制台:
说明:
这里是模拟上传操作,所以将pdf放在了test.html同级目录,这里也就可以直接用文件名作为url。 实际项目中,这里url换成pdf文件所在的地址。
在使用的可以将主要文件放在自己项目中进行使用。