PDF.js实现html页面读取pdf文件内容

2024-04-15 10:01:01

项目中遇到要在HTML页面上读取PDF文档的内容，并显示在网页上。

pdf.js官网：pdf.js官网

本地附件：pdf.js

一.下载

1、下载至本地

2、创建PDF.js文件夹并将刚解压的文件放入其中

二.将 PDF.js 文件夹放到项目服务器根目录下

小伙伴可能会有点头晕先跟着做稍后解释

1.登录项目服务器

2.登录服务器后将 PDF.js 文件夹拷贝到项目服务器的根目录

三. 使用 pdf.js 显示 pdf 文件

1.打开浏览器新建一个标签页输入你的项目服务器地址

这里我用我的服务器地址进行演示 10.0.0.5

2.当你访问项目服务器根目录(10.0.0.5) 能够看到 PDF.js 这个文件夹说明这一步已经完成了

3.在PDF.js 中依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)

4.随后会显示截图上的 pdf 文件

5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

解释: 我这里显示的pdf文件是服务器上本来就有的测试文件请看下图

如果你的地址栏中 ? 后面 file = PDF地址可以显示 pdf 那么基本上成功了

四. 在项目中使用

 <iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>

问题：如果文件是远程服务器上的文件，会产生跨域，就会遇到如下错误

PDF.js v2.0.943 (build: dc98bf76)
信息：file origin does not match viewer's

控制台：Uncaught (in promise) Error: file origin does not match viewer's

如果需要加载远程服务器的pdf文件，远程服务器返回pdf文件流，然后在viewer.html的url后面添加file=http://127.0.0.1:8020/PDF/test,但是pdf.js不支持跨域请求，所以会报错：file origin does not match viewer’s，试了很多种方法仍然报错，所以简单粗暴的方法就是把viewer.js的判断远程地址的代码注释掉即可（1564~1566行）。

if (origin !== viewerOrigin && protocol !== 'blob:') {throw new Error('file origin does not match viewer\'s');}

PDF.js实现html页面读取pdf文件内容相关推荐

使用pdf.js在web页面展示pdf文件
最近弄的项目中需要在线展示PDF文件,以前用的是Adobe PDF阅读器直接在浏览器端打开的,这要求客户端必须安装这个软件,若是没有安装就不能在线预览了.为了解决这个问题,最终决定用pdf.js来实现 ...
JS通过ajax动态读取xml文件内容
http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head& ...
pdf.js 利用HTML5技术显示pdf内容
Mozilla实验室最近在github上开源了一款js库pdf.js,用来读取PDF文件. http://mozilla.github.io/pdf.js/ Using base64 encoded ...
使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
利用PDF.JS插件解决了本地pdf文件在线浏览问题（根据需要隐藏下载功能，只保留打印功能）
利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能) 参考文章: (1)利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功 ...
JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript前端:与PDF.js结合,实现网页PDF内容批量下载前言一.PDF.js是什么? 二.PDF.js单个PDF文 ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...

最新文章

热门文章