使用pdf.js在线预览远程服务器上的pdf文件

最新推荐文章于 2024-02-05 15:52:47 发布
最新推荐文章于 2024-02-05 15:52:47 发布
阅读量2.2w 收藏 7
点赞数
分类专栏： java相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012498149/article/details/78626623
版权

在网上找的例子大多都是在线预览本地pdf文件，但是如果地址直接指向服务器地址，则会出现跨域问题，无法正常获取预览文件........

我的解决思路就是将远程文件转换成文件流，然后将pdf.js的文件地址指向获取文件流的地址，下附代码......................

1.自行下载pdf.js

我下载的目录如下，用不到的我就直接删除了。




2.实现请求远程服务器文件流代码，我这里使用的是servlet


3.修改viewer.js里面设置预览文件的请求地址，这里直接设置文件流的请求地址



大功告成，我这里是用于移动端的网页，IOS可以直接浏览pdf文件，而安卓则不支持，而使用pdf.js就可以在线预览，无需用户再下载插件。。。。。。。

亲昵YY
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Java web使用pdf.js在线预览远程服务器上的pdf文件
02-08
Java web使用pdf.js在线预览远程服务器上的pdf文件,包里有pdf.js资源文件以及使用文档
vue前端预览pdf并加水印、ofd文件，控制打印、下载、另存，vue-pdf的使用方法以及在开发中所踩过的坑合集
zhangzuying的博客
06-21 1万+
根据公司的实际项目需求，要求实现对pdf和ofd文件的预览，并且需要限制用户是否可以下载、打印、另存pdf、ofd文件，如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单，直接调用浏览器的预览就可以而且功能也比较全，但是一涉及到禁止用户打印、另存的话就不可以用浏览器自带的预览方式了。那就只能寻找插件来模拟了，之前在eletron-vue项目中使用过pdfjs以及vue-pdf插件，效果不是特别好
浏览器如何实现PDF和office文件在线预览？
weixin_51165263的博客
07-24 1579
这种方式在不同浏览器上表现不一样，部份手机浏览器直接不能直接不能打开或是表现为下载，基本不实用,如果预览PDF,可以使pdf.js这样的纯JS库但是实际场景用时要做各种格式判断浏览判断麻烦死了。// 示例 url，实际不存在。
前端使用pdf.js进行pdf文件预览的第二种方式：Viewer.html
最新发布
qq_29517595的博客
02-05 2835
前端使用pdf.js进行pdf文件预览的第二种方式：Viewer.html
实现在线预览远程服务器pdf文件心路历程
weixin_33858249的博客
05-05 3157
前言 大家都知道在线预览本地pdf文件、只要将地址定位到本地pdf所在目录，即可打开pdf文件。但是如果地址直接指向服务器地址呢，近期做的项目是在线预览服务器上的pdf文件，出现了跨域问题，无法正常获取预览文件。 首先想到的解决方法： 1、让存放pdf文件的服务器支持跨域 但问题又来了，存放pdf文件的服务器有很多、以后还可能增加，每次都配置一下跨域、实在繁琐、而且也存在安全问题 2、当前项目的后...
pdf.js 预览 远程服务器上的pdf文件
大清没了的博客
10-23 980
下载pdf.js 稳定版http://mozilla.github.io/pdf.js/getting_started/#download 或者 我自己的百度云https://pan.baidu.com/s/1GFY6kwi0cFztmS_N9UnqGw 提取码w35l 把下载的文件 放进 一个文件夹 扔进 tomcat下webapps, 启动 访问web 下的vi...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
fhey的博客
05-27 2万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
Java实现PDF在线预览功能
以爱护甲,爱满枫林。
03-09 1187
【代码】Java实现PDF在线预览功能。
浏览器中预览文件（pdf、图片文件）
crazybai0001的博客
03-31 1901
本文讲解在浏览器中预览文件的具体实现， 使用window.fetch请求文件资源，生成blob对象，创建此blob对象的url，使用生成的url在iframe中预览PDF文件，或通过img标签预览图片文件。
js实现PDF 预览和文件下载
前端开发工程师博客
05-26 1万+
综上所述，实际在实现pdf预览的过程中可能暂时没有办法达到完美的方式，特别是针对类似发票类的pdf无法保证 h5移动端都具备下载功能无法保证 pdf预览时，预览的字体和实际发票字体保持一致现有大部分的预览方式都基于pdf.js的方式实现，而pdf.js内部通过的方式基于文件地址或数据流来获取内容，再通过canvas处理渲染pdf文件，感兴趣可以去研究pdf.js源码。pdf.js带来相关问题就是如果对应的pdf文件中包含了pdf.js中不存在的字体，那么就无法完整渲染，另外渲染出来的字体和原本的。
关于pdf.js在线预览远程的服务器中的pdf
yufeng005的博客
03-01 6494
本文讲的是在线预览服务器中pdf。若是值查看固定的（项目中的）pdf的话直接看官网，这里不再说明。1.首先下载pdf.jshttps://github.com/mozilla/pdf.js下载后放入工程的静态文件目录，主要有build和web两个文件夹，其中web有两个js（getpdfInfo.js和jquery.min.js）是我自己后来加的2.在点击预览的页面(我的是jsp页面)写点击预览跳...
网页在线打开PDF_网站中在线查看PDF之pdf.js
天马3798
10-15 2708
pdf.js 使得不需要在计算机上安装 Adobe Reader 或其他 PDF 阅读器就可以在 Web 上阅读 PDF 文档成为可能。pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。pdf.js 将 PDF 文档转换为 HTML5 Canvas 元素。PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。使用方案：file=(指定自己的pdf文件地址即可)pdf.js是一个免费的开源软件。
js在线查看pdf文件
12-05
JavaScript在线预览pdf文件，在线查看；
pdf.js在java web项目中远程预览ftp上的pdf文件.docx
03-05
看了很多大神的博客，自己改造了下，终于做出了可以在线预览远程FTP服务器上的PDF文件的功能。大概花了1天时间，遇到很多坑。所以总结下，写了个文档，很详细，一步一步来就行了
PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2
06-14
实例242 读取远程文件中的数据 314 实例243 删除指定目录下的所有.ini文件 315 实例244 将文本文件中数据存储到数据库中 316 4.5 文件的压缩与解压 318 实例245 PHP中压缩RAR文件 319 实例246 PHP中将上传文件转换成...
网管教程 从入门到精通软件篇.txt
04-25
如果有多引导系统的计算机，必须保证是在包含 Windows 的驱动器上使用该命令。 Diskpart 　创建和删除硬盘驱动器上的分区。diskpart 命令仅在使用故障恢复控制台时才可用。 　diskpart [ /add |/delete] [device_...
PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1
06-14
实例242 读取远程文件中的数据 314 实例243 删除指定目录下的所有.ini文件 315 实例244 将文本文件中数据存储到数据库中 316 4.5 文件的压缩与解压 318 实例245 PHP中压缩RAR文件 319 实例246 PHP中将上传文件转换成...
redis在Java web项目的简单应用
热门推荐
亲昵YY
11-15 2万+
一.准备要使用的的jar包,我使用了以下jar包，关于json的jar包是方便存储和转换redis用到的值; 二.编写加载redis是要用到的实例类 package com.redis; import redis.clients.jedis.ShardedJedis; /** * @Title: RedisDataSource.java * @copyright * @Pa
vue使用pdf.js在线预览
09-29
在Vue中使用pdf.js实现在线预览pdf文件流的步骤如下： 1. 首先，通过npm安装pdf.js，可以使用以下命令安装：npm install pdfjs-dist。 2. 然后，在需要使用pdf.js的组件中，引入pdf.js库，可以使用以下代码引入：import pdfjsLib from 'pdfjs-dist'。 3. 接下来，加载pdf文件流，可以使用pdf.js提供的API进行加载和渲染。你可以使用getDocument()方法加载pdf文件流，然后使用promise来处理加载成功后的逻辑。一旦加载成功，你可以使用render()方法将pdf页面渲染到指定的DOM元素中。 以下是一个简单的示例代码： ``` <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { mounted() { this.loadPDF() }, methods: { async loadPDF() { const pdfUrl = 'path/to/your/pdf/file.pdf' const pdf = await pdfjsLib.getDocument(pdfUrl).promise const pageNumber = 1 // 你要加载的pdf页面的页码 const page = await pdf.getPage(pageNumber) const canvas = this.$refs.pdfCanvas const context = canvas.getContext('2d') const viewport = page.getViewport({ scale: 1 }) // 获取pdf页面的视图大小 canvas.width = viewport.width canvas.height = viewport.height const renderContext = { canvasContext: context, viewport: viewport } page.render(renderContext) } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值