pdf.js踩过的坑--实现无需下载文件到本地直接预览功能

最新推荐文章于 2024-07-29 22:16:11 发布
最新推荐文章于 2024-07-29 22:16:11 发布
阅读量2.8k 收藏 4
点赞数
文章标签： pdf.js pdfjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ294177543/article/details/107222166
版权
本文介绍了如何使用pdf.js在项目中实现无需下载文件到本地即可预览PDF的功能。针对文件存储在FTP服务器上的情况，提供了解决相对路径问题和文件名包含特殊字符导致预览异常的策略，包括通过前端获取上下文和URL编码。
摘要由CSDN通过智能技术生成

前提：文件存储在ftp服务器上

目录

pdf.js打开文件的方式

pdf.js官网提供了一种最简便的打开文件的方式：

//If you want to open a PDF from your website with PDF.js, simply link to the viewer and pass the location of the PDF file. For example:
<a href="/web/viewer.html?file=%2Fyourpdf.pdf">Open yourpdf.pdf with PDF.js</a>

可以看到官网给出的例子是基于本地已下载的pdf文件进行的预览,在实际项目中要实现需要先将文件下载到项目本地再进行预览功能。
实际上file后可以填写get请求方式的下载路径

//file后的路径需要encodeURIComponent()编码
window.open("web/viewer.html?file="+encodeURIComponent("/download?name="+_doc+"&path="+_url)
最低0.47元/天 解锁文章
KoitoChuo
关注
JS--浏览器直接打开pdf文档
me_never的博客
01-01 1万+
最近做了一个blob数据类型的pdf文档直接在浏览器打开，有一些难度。 首先需要给后台发送一个{responseType:‘blob’}，让后台返回的数据类型为blob 代码如下： var promise = model.postData(‘path’,params,{responseType:‘blob’}); promise.then(function(resp){ var blob = re...
JS如何实现EXCEL，word,PDF文件不下载直接打开
zhumin5的博客
07-22 741
这种方式在不同浏览器上表现不一样，部份手机浏览器直接不能直接不能打开或是表现为下载，基本不实用,如果预览PDF,可以使pdf.js这样的纯JS库但是实际场景用时要做各种格式判断浏览判断麻烦死了。//本页面内跳转链接实现预览。//新建窗口打开链接预览。
js实现html中的pdf文件的在线预览、下载、打印等功能
07-06
包括js资源，及简单demo实现：html中的pdf文件预览
记录一下使用PDFJS遇到的坑
最新发布
m0_63057114的博客
07-29 2313
在引用PDFjs的过程中，遇到了一下坑，这这里记录一下。列如：1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.和禁用按钮功能等...
js不打开直接下载txt文件
qq_43780814的博客
12-03 1611
js不打开直接下载txt文件 1.调用 downloadUrlFile(url); //url=文件来源。地址//获取文件blob数据并保存 2.saveAs(xhr.response, fileName);开始下载 参考https://www.cnblogs.com/weixiaofantasy/p/13191184.html 》成功 downloadUrlFile(url)//调用 /** * 获取页面文件名 * @param url 文件url */ function downloa.
vulhub中PDF.js 任意JavaScript代码执行漏洞（CVE-2024-4367）
yougexiaojiuguan的博客
06-02 1297
漏洞复现过程的记录
在线预览pdf文件，使用pdf.js
AdleyTales的技术博客
11-16 1819
1. 下载pdf.js pdf.js官方下载地址 2. 解压 3. 运行启动 项目在本地环境（url以file://开头）无法运行，需要服务器环境。 使用nginx，修改配置文件 nginx安装目录/conf/nginx.conf server { listen 8888; location / { root D:/studyspace/pdfjs-2.5.207-dist; } location /pdf/ { proxy_pass http://127
pdf.js-master.zip_pdf-master_pdf.js-master_pdfjs_pdf文件预览
09-24
4. **离线预览**：由于 PDF.js 是纯 JavaScript 库，所以用户可以在线预览 PDF，也可以选择离线下载后在本地进行预览。 5. **安全性**：由于不依赖 Flash 或其他第三方插件，PDF.js 在安全方面更有优势，减少了因...
小程序预览PDF文件插件Pdf.js
11-20
Pdf.js是由Mozilla开发的一款开源JavaScript库，它允许在Web浏览器中直接预览PDF文件，而无需依赖任何其他第三方插件。其核心理念是将PDF解析为一系列的图像和文本元素，然后在浏览器的Canvas元素上绘制这些元素，...
pdf.js Demo 纯js实现PDF在线预览及打印
11-10
这个Demo展示了如何利用PDF.js库实现PDF在线预览和打印功能，同时还提供了页面缩放和打开本地PDF文件的能力。以下是关于这个项目的详细知识点： 1. **PDF.js基本概念**：PDF.js是一个JavaScript库，它解析PDF文件并...
pdf.js使用demo(已解决隐藏打印下载等按钮）
07-11
pdf.js使用demo(已解决隐藏打印下载等按钮）
pdfjs-2.13.216-dist.zip 资源下载
03-17
- **离线使用**：无需依赖任何服务器端服务，开发者可以将 PDF.js 集成到本地应用或网页中，实现离线查看 PDF。 - **自定义 UI**：PDF.js 提供了可定制的用户界面，开发者可以根据需求调整样式和布局。 - **API ...
js下载文件不在浏览器中打开
luoluogh的博客
11-16 584
【代码】js下载文件不在浏览器中打开。
使用js下载pdf文档，点击下载不打开文档，直接下载
热门推荐
One__PieceLufei的博客
08-04 1万+
使用js下载pdf文档，点击下载不打开文档，直接下载 在html中写入  下载 在js中写入 download: function() { var id = getSelectedRow(); if(id == null){ return ; } var rowData = $("#jqGrid").getRowData(id); var u
前端-javascript根据url下载文件
lyt的博客
10-22 1668
var url = url.replace(/\\/g, '/'); var fileName = url.substring(url.lastIndexOf("/")+1); var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; // 为了避免大文件影响用户体验，建议加loading xhr.onload = () => { if (xhr.status === 200)
pdf.js实现在HTML下直接浏览pdf文档，无需插件即可实现
weixin_34348174的博客
05-12 1295
pdf.js是一款开源的pdf文档读取解析插件，据说在HTML5下诞生的，对于主流的浏览器基本都支持。官网GitHub地址如下：https://github.com/mozilla/pdf.js由于官网项目文件过多，不太容易理解，因此，我自己针对此项目做了一个简单的Demo，Demo参考地址如下：1.新窗口浏览pdf文档：http://www.51purse.com/pdf/...
打开PDF去除下载按钮（pdf.js）
墨 尘
12-09 8150
最近在做一个打开pdf只要预览不要下载的功能，浏览器打开的话会有一个下载按钮，但是我不想要这个按钮，找了好久没找到去掉这个按钮的方法，最后我选择了用pdf.js。 其实pdf.js用起来还是挺简单的： 链接: https://pan.baidu.com/s/1itCT9_AK2HBPNxIC9fvV5w 提取码: ymtk 下载后解压，然后放到web工程里面 首先打开web目录下的view...
使用PDF.js踩坑记~
AlaiaCodeingLife
07-09 5259
想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！ 项目场景： 目前遇到需求，需要在pc端打开pdf预览 解决方案： 发现有许多成熟的方案，最终决定使用PDF.js进行开发 首先先在官网下载 http://mozilla.github.io/pdf.js/getting_started/#download 下载完成后目录结构是这样： 我们打开web后点击： 这里有一个坑，我怎么都打不开，结果最后发现是因为需要启动服务才能使用这里我使用的是li
Vue实现PDF在线预览与下载：借助pdf.js
本文主要探讨了如何在Vue.js框架下实现PDF文件的在线预览和下载功能，利用了pdf.js库。在IT行业中，这种功能在许多web应用程序中都是常见的需求，尤其是那些需要处理文档或报告的平台。同时，文章还提到了nRF52832微...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值