通过pdf.js实现服务器端pdf文件的预览

最新推荐文章于 2024-07-30 11:27:41 发布
最新推荐文章于 2024-07-30 11:27:41 发布
阅读量1w 收藏 15
点赞数 2
分类专栏： PDF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tao111369/article/details/79714154
版权
本文介绍了如何利用pdf.js库在服务器端预览PDF文件，兼容Firefox、Chrome和IE9+浏览器。主要步骤包括从官网下载pdf.js及相关文件，修改viewer.js中的DEFAULT_URL变量，将必要的文件复制到项目目录，并删除不必要的资源。前端通过引用viewer.html并结合后台Java代码实现预览功能。最后展示了预览效果，支持下载和打印操作。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
一个菜鸟的奋斗之路
关注
专栏目录
PDF.js读取远程服务器文件
chenxue843400447的博客
02-28 2317
后台代码: WebUtils.getRequest().setCharacterEncoding("utf-8"); WebUtils.getResponse().setCharacterEncoding("utf-8"); InputStream fis=null; URL url = new URL(filePath); URLConnection con...
Java web使用pdf.js在线预览远程服务器上的pdf文件
02-08
Java web使用pdf.js在线预览远程服务器上的pdf文件,包里有pdf.js资源文件以及使用文档
pdfjs预览服务器文件,关于前端:PDF-文件在线预览pdfjs-使用教程
weixin_28818873的博客
08-03 494
因我的项目开发须要在线展现 PDF文件，为解决 PDF文件 在浏览器关上后电子签章、电子签名等展现不全且局部浏览器兼容问题特利用pdf.js解决该问题；pdf.js框架为HTML5,无需任何本地反对，兼容性极好只有浏览器反对 HTML5 即可(据说 IE9 以上都是能够的)；过后解决该问题摸索工夫比拟长，其实也并没有设想的那么艰难比较简单特此记录下此博客，以便大家参考！pdf.js git地址 :...
使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端
weixin_51326478的博客
07-30 1040
文章浏览阅读521次。之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现。我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新。文章浏览阅读7.6k次。【Vue】vue2使用pdfjs预览pdf文件，在线预览方式一，pdfjs文件包打开新窗口预览pdf文件_vue2 pdfjs-CSDN博客。
关于pdf.js在线预览远程的服务器中的pdf
yufeng005的博客
03-01 6699
本文讲的是在线预览服务器中pdf。若是值查看固定的（项目中的）pdf的话直接看官网，这里不再说明。1.首先下载pdf.jshttps://github.com/mozilla/pdf.js下载后放入工程的静态文件目录，主要有build和web两个文件夹，其中web有两个js（getpdfInfo.js和jquery.min.js）是我自己后来加的2.在点击预览的页面(我的是jsp页面)写点击预览跳...
pdf.js如何访问服务器上面的文件,pdf.js使用方法
weixin_28950403的博客
08-13 1456
1: 进入官网2 : 选择稳定版 下载3: 下载至本地4 : 解压5:创建PDF.js文件夹 并将刚解压的文件放入其中小伙伴 可能会有点头晕 先跟着做 稍后解释1.登录 项目服务器2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址这里我用我的服务器 地址进行演示10.0.0.52.当 你访问 项目 服务器 根...
小程序预览PDF文件插件Pdf.js
11-20
本文将详细介绍如何使用"小程序预览PDF文件插件Pdf.js"，以及在Uniapp框架中实现PDF预览的步骤。 Pdf.js是由Mozilla开发的一款开源JavaScript库，它允许在Web浏览器中直接预览PDF文件，而无需依赖任何其他第三方...
openoffice实现文件预览的jar及pdf.js
04-19
在实现文件预览时，前端部分通常会使用JavaScript库，这里提到的"pdf.js"就是Mozilla开发的一个开源项目，专门用于在浏览器中渲染PDF文件。PDF.js通过解析PDF文件并将其转换为HTML5 Canvas元素显示，从而实现无插件...
pdf.js在java web项目中远程预览ftp上的pdf文件.docx
03-05
远程FTP服务器上的PDF文件预览 在Java web项目中，需要预览远程FTP服务器上的PDF文件。这可以通过使用pdf.js插件和自定义servlet来实现。 ### 2. pdf.js插件的使用 pdf.js插件是一个功能强大且轻量级的PDF查看器...
js打开服务器pdf文件,iOS使用pdf.js打开PDF文件
weixin_34342446的博客
07-31 1295
最近研究了下iOS打开PDF文件的方式，由于项目需要在浏览PDF文件时能使用HTML格式文件，调研了一下iOS中打开PDF文件的几种方式，发现pdf.js开源库可以做到这一点，通过调用js在线预览PDF文件，预览时将PDF文件转为HTML标签，而且集成方便。教程中把pdf.js作为服务端的步骤：clone工程到本地：$ git clone git://github.com/mozilla/pdf....
pdf.js 预览 远程服务器上的pdf文件
大清没了的博客
10-23 1029
下载pdf.js 稳定版http://mozilla.github.io/pdf.js/getting_started/#download 或者 我自己的百度云https://pan.baidu.com/s/1GFY6kwi0cFztmS_N9UnqGw 提取码w35l 把下载的文件 放进 一个文件夹 扔进 tomcat下webapps, 启动 访问web 下的vi...
PDF.js访问远程服务器报file origin does not match viewer's
热门推荐
xinlingdexueba的专栏
03-14 1万+
PDF.js的使用 1.下载pdf.js插件：点击下载。 2.解压后把web和build文件夹放进项目里。 。 3.新建一个test.html,通过iframe标签嵌套viewer.html即可，如果是只加载本地文件，在viewer.js修改默认的pdf文件路径即可。 <iframe src="web/viewer.html" width="100%" height="800p...
PDFJS在线预览读取文件服务器数据
05-21 369
之前做过PDF预览，在本项目中，本是之前做好了，项目经理突然要求要后台给前传文件流的方式来预览，这可把我给蛋疼的，在网上搜罗一翻，找到PDFJS来实现效果，在网上找了各种资料，可是就是不显示啊有木有，经过两的时间 总算找到了原因，我不知道网上其他大牛是怎么做出来的，反正我按照他们的方式是不行，下面来说说我遇到的问题，整理一下，希望能帮助遇到和我一样问题的同学！ 首先来看看网上的说法： 第一步：下载源码https://github.com/mozilla/pdf.js 第二步：构建PD...
vue 中如何使用pdf.js实现预览
C_TopTopTop的博客
06-14 1085
pdf.js文件预览 (4）实现 （5）问题 （6）解决引入的pdf.js文件中找到 if (fullRequestXhr.getResponseHeader('Accept-Ranges') !== 'bytes') { return false; }更换为
vue实现pdf文档在线预览功能
09-23 1079
vue实现pdf文档在线预览功能 简介针对android系统不支持pdf文档在线预览，可通过引入pdf.js插件实现，其具体实现步骤如下 一、引入插件 方式一：npm install --save pdfjs-dist，安装 针对android系统不支持pdf文档在线预览，可通过引入pdf.js插件实现，其具体实现步骤如下 一、引入插件 方式一：npm install --save pdfjs-dist，安装完成后在vue项目的node_modules出现如下依赖 方式二：只引入pdf.js.
pdf.js使用方法整理，web页面中pdf在线查看，web页面显示pdf文档
小糖穿越火线
03-27 1685
pdf.js 使用步骤： 一、到官网下载 pdf.js 插件并解压 (地址:http://mozilla.github.io/pdf.js/) 若官网无法下载，通过下面链接下载，注：作者有测试方法以及使用方法介绍，大家可以查看。 https://github.com/GleasonBian/PDFViewer（感谢作者） 二、下面介绍自己使用步骤： 1.需要本地服务器，这样方便...
vue-pdf组件实例
weixin_46325225的博客
10-10 798
【代码】vue-pdf组件实例。
页面PDF预览控件pdf.js使用总结
Sagitarioo的博客
06-01 4555
一、插件下载 下载地址：http://mozilla.github.io/pdf.js/ 内含demo页面，打开后显示效果如图所示： 二、使用方法 将控件的相应文件引入 <link rel="stylesheet" href="../../js/plug/pdfjs/web/viewer.css"> <link rel="resource" type="appli...
C#通过pdf.js实现pdf文件预览
最新发布
09-12
在C#中，PDF.js是一个JavaScript库，用于在浏览器环境中提供交互式的PDF查看体验。如果你想要在Web应用程序中实现PDF文件的预览，通常会结合HTML、CSS和C#服务器端处理。下面是一种简单的步骤： 1. **安装依赖**：首先需要在前端项目中引入PDF.js库，这通常是通过npm或者直接在HTML中引用CDN。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/2.16.358/pdf.min.js"></script> ``` 2. **服务器端处理**：将PDF文件保存到服务器上，然后提供一个HTTP请求API供前端获取PDF数据。C#可以使用如ASP.NET Core或旧版的ASP.NET MVC等框架来实现这个功能。 ```csharp using System.IO; // ... [HttpGet] public IActionResult GetPdf(string fileId) { var filePath = Path.Combine("Your/Pdf/Folder", fileId + ".pdf"); return File(filePath, "application/pdf"); } ``` 3. **前端渲染**：在前端，当用户点击预览按钮时，发起GET请求获取PDF内容，并利用PDF.js展示。例如，在JavaScript中: ```javascript async function previewPdf(fileId) { const url = "/api/get-pdf/" + fileId; // 调用你的API路径 const response = await fetch(url); const pdfUrl = URL.createObjectURL(await response.arrayBuffer()); document.getElementById('pdfViewer').src = pdfUrl; } ``` 4. **创建PDF Viewer**：在HTML中添加一个`<div>`或`<iframe>`元素作为PDF viewer，比如使用`<object>`标签： ```html <object id="pdfViewer" type="application/pdf" width="100%" height="100%"></object> ```
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值