使用pdf.js预览pdf，隐藏下载功能，注释ctrl+s下载功能

最新推荐文章于 2024-06-19 16:35:21 发布
置顶 最新推荐文章于 2024-06-19 16:35:21 发布
阅读量7.3k 收藏 16
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jayquartus/article/details/96439662
版权
第一次写博客，因为浏览器自带的预览pdf功能无法隐藏下载按钮，所以使用pdf.js来代替。使用pdf.js步骤1.在官网下载pdf.js并解压（地址：PDF.js ）选择稳定版下载，下载之后在项目的资源目录下创建一个文件夹，压缩文件解压到项目的资源目录下2.如何预览pdf使用pdf.js预览pdf是很简单的，链接web目录下的viewer.html页面，将pdf文件地址当作f...
摘要由CSDN通过智能技术生成

第一次写博客，因为浏览器自带的预览pdf功能无法隐藏下载按钮，所以使用pdf.js来代替。

使用pdf.js步骤
1.在官网下载pdf.js并解压（地址：PDF.js ）
在这里插入图片描述

在这里插入图片描述

选择稳定版下载，下载之后在项目的资源目录下创建一个文件夹，压缩文件解压到项目的资源目录下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
2.如何预览pdf
使用pdf.js预览pdf是很简单的，链接web目录下的viewer.html页面，将pdf文件地址当作fileId的属性。因为我需要访问服务器上的pdf文件&#

最低0.47元/天 解锁文章
jayquartus
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js实现pdf文件下载
宇宙
07-28 1187
【代码】js实现pdf文件下载。
pdf.js文件下载
10-31
博客中所涉及到的文件路径，文件名及需要注释的部分都是与此资源相匹配的，大家可以直接下载配合文档解决问题
pdf.js——在线预览下载打印pdf文件插件
sunyanchun的专栏
09-27 1220
html使用 下载PDF.js，http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹 放到 项目static文件夹下 代码示例 <iframe id="iframe1" src="/static/pdfjs/web/viewer.html?file=xxx.pdf"></iframe> 可以在js中动态赋值 var prefixUrl = '/static/pdfjs/web/view.
关于pdf.js标注的解决方法
最新发布
gaozizi的博客
06-19 228
pdf.jsh绘制问题
JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
qq_46119575的博客
01-08 5265
JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
vue +PDF.js实现pdf预览和下载
weixin_38673922的博客
06-03 2310
一、导入pdf.js插件，放到static目录下 二、点击官方文件预览pdf 三、预览效果 四、【注意】 1、在和后端交互时，后端应返回全地址： eg:http://192.168.105.42:9090/Files/Documents/2021-5/P2021F2内外0015CN0002/InFile/P2021-0020办理登记手续通知书2021-04-292020-02-26BLDJSXTZS.20210510164849702.pdf 2、前端将请求到的全地址拼接到file=后面，此时 ①若
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;.worker.js
10-13
pdf.js ， pdf.worker.js。将两者放在同一文件夹下，在html页面中用src引入pdf.js就可以了。
计算机应用基础二网页制作完整.pdf
10-09
11. 常用的浏览网页工具有Chrome、Firefox、Safari和Edge，它们支持书签、历史记录、下载管理等功能，快捷键如Ctrl+T新建标签页，Ctrl+P打印等。 12. 创建本地站点的步骤包括选择存储位置、创建文件夹结构、设置...
《计算机应用基础2-网页制作》(完整).pdf
10-06
21. **DW的快捷键**如Ctrl+C/V/Paste（复制/粘贴/查找与替换），Ctrl+Z（撤销），Ctrl+X（剪切），F12（预览），F8（显示/隐藏面板）等。 22. **建立站点目录结构**要逻辑清晰，便于管理和维护，`IMG`目录用于存放...
程序天下:JavaScript实例自学手册
07-08
7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的...
pdfJS和pdf.worker
06-03
兼容IE的JS在线预览pdf(pdfjs和pdf.worker)
网管教程 从入门到精通软件篇.txt
04-25
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R，修复！ Windows XP（包括 ...JS：javascript源文件 JSP：HTML网页，其中包含有对一个Java servlet...
【PDF.js】PDF文件预览
HJay_Chou的博客
04-10 2094
使用PDFJS实现pdf文件的预览，支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
AmyGeng123的博客
08-31 4931
iframe结合pdf.js实现pdf的预览/下载及打印
在web端在线预览pdf文件（分页预览、下载、打印）
rookien_的博客
01-24 2996
本文写作环境是若依开源框架vue2+elementui在做这个需求的时候，我查找了资料，简单的是有使用vue-pdf的，我写了发现有跨域问题，只能另寻他法，最后发现很有码友大大们使用的是pdf.js插件，我开始着手，在和后端同事的配合调试下终于成功实现了pdf文件在线预览。以上就是完成pdf文件预览的步骤，可以实现pdf文件的简单预览（分页）、下载。看很多码友大大们还实现了一些可以高亮显示页面内容和驻点什么的，本文这只是一个简单的实现，实现额外功能还需要在此基础上加深研究。加深巩固：Ajax请求。
pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式
热门推荐
_夜渐凉
01-18 1万+
ViewerJS简介 ViewerJS的繁重工作是由这些令人敬畏的项目完成的： PDF.js（由Mozilla提供） WebODF（由KO GmbH提供） 运行ViewerJS就像创建链接一样简单。您可以使用它来提供全屏演示，也可以用于在您的网站中内嵌显示文档或作为文档链接的查看器。由于浏览器保护自己免受安全风险（这是一件非常好的事情）的方式，ViewerJS仅适用于驻留在您自己的服务...
JS下载PDF文件
weixin_46361785的博客
04-07 1184
JS下载PDF文件
pdf.js批注功能
09-13
PDF.js是一个用于在Web浏览器中呈现PDF文件的开源JavaScript库。尽管PDF.js本身并没有内置的批注功能，但你可以基于PDF.js构建自定义的批注功能。根据引用[2]和引用提供的信息，你可以通过以下步骤来实现PDF.js的批注功能： 1. 首先，确保你已经在你的Web应用程序中正确地集成了PDF.js库。你可以从官方网站https://mozilla.github.io/pdf.js/获取最新版本的PDF.js，并按照官方文档中的说明进行集成。 2. 创建一个注释器，该注释器基于PDF.js库。这个注释器可以是一个自定义的JavaScript类或模块，用于处理批注的创建、编辑和显示。 3. 在你的注释器中，实现添加批注的功能。根据引用中提供的截图，你可以使用普通的JavaScript代码来创建各种类型的批注，如箭头、自由手绘、自由文本、文本选择高亮/下划线/穿透、测量、圆圈和戳记。你需要使用PDF.js提供的API和Canvas元素来在PDF页面上绘制和显示这些批注。 4. 另外，你可能还需要实现保存批注的功能。这样用户可以保存他们添加的批注，以便在以后重新加载时查看或编辑。你可以根据你的需求选择合适的方法来保存批注数据，如将批注数据保存在服务器端或使用本地存储技术（如LocalStorage或IndexedDB）。 总结起来，要在PDF.js中实现批注功能，你需要集成PDF.js库到你的Web应用程序中，并基于PDF.js构建自定义的注释器来实现批注的创建、编辑和显示。你可以使用普通的JavaScript代码和Canvas元素来绘制和显示各种类型的批注。此外，你可能还需要实现保存批注的功能，以便用户可以保存和加载他们添加的批注。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值