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

最新推荐文章于 2024-04-25 11:30:27 发布

别忘了微笑_cuicui

最新推荐文章于 2024-04-25 11:30:27 发布

阅读量1.3w

点赞数 2

本文链接：https://blog.csdn.net/CuiCui_web/article/details/107185314

版权

本文主要是基于在官网下载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文件所在的地址。

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

别忘了微笑_cuicui

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
4
评论
pdf.js-----js解析pdf文件实现预览，并获取pdf文件中的内容(数组形式)

1、到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )2 修改viewer.js代码this.textLayer.textContentItemsStr 为pdf中的具体内容，是一个数组如果需要对数据操作，可以在这个定时器中进行更改代码3、模拟一个上传界面在test.html中编写了一个原生的上传事件每上传一个pdf，都会打印出数组也可以直接在地址栏输入文件名字，http://localhost:63342/pd
复制链接

扫一扫