js浏览器新窗口预览pdf文件(链接或本地)

最新推荐文章于 2024-08-06 12:58:11 发布
最新推荐文章于 2024-08-06 12:58:11 发布
阅读量4.5k 收藏 4
点赞数 1
分类专栏： # pdfjs 文章标签： javascript pdf 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588529/article/details/130724304
版权
文章介绍了两种方法来预览PDF文件，一种是通过`window.open`直接打开本地或在线PDF，但无法限制下载和打印功能。另一种方式是利用pdfjs插件，通过配置viewer.html并结合CSS隐藏操作按钮，以实现对PDF预览权限的控制。
摘要由CSDN通过智能技术生成

1、直接window.open(‘本地文件的相对路径或在线文件的链接’)。这种无法修改pdf预览页的操作（禁用下载、打印等）
2、使用pdfjs插件：
①下载pdfjs，pdfjs官网下载
②可以将pdfjs放在public中，build中只保留pdf.js和pdf.webpack.js
在这里插入图片描述
在需要跳转的地方：window.open('/pdfjs/web/viewer.html?file=' + source)
source为本地pdf文件相对路径或pdf链接
可以通过修改css隐藏操作按钮

hanccolo
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现网站预览PDF文件
04-14
js实现网站预览PDF文件
pdf.js前端插件，用于在线预览pdf文件
06-16
pdf.js前端插件，通过window.open(basePath + '/pdfjs/web/viewer.html?file=' + fileUrl);即可在线预览pdf文件
pdf.js实现web h5预览pdf文件（兼容低版本浏览器）
HHH917的博客
06-15 770
以下为在uniapp vue3 实现 h5 预览pdf文件的代码 有使用vant（手指缩放功能只写了一点，是不能用的）。使用的是pdf.js 版本为 v2.16.105。因为新版本 兼容性不太好，部分手机预览不了，所以采用v2版本。
利用pdfjs在线显示pdf文件
weixin_52418790的博客
01-28 1967
1、下载pdf.js插件：https://github.com/mozilla/pdf.js 2、创建Vue项目 将下载好的pdf.js插件放在static文下 3、项目文件代码如下 <template> <div class="wrap"> <iframe :src="pSrc" width="100%" height="100%"></iframe> </div> </template> <script&g
js实现PDF 预览和文件下载
热门推荐
前端开发工程师博客
05-26 1万+
综上所述，实际在实现pdf预览的过程中可能暂时没有办法达到完美的方式，特别是针对类似发票类的pdf无法保证 h5移动端都具备下载功能无法保证 pdf预览时，预览的字体和实际发票字体保持一致现有大部分的预览方式都基于pdf.js的方式实现，而pdf.js内部通过的方式基于文件地址或数据流来获取内容，再通过canvas处理渲染pdf文件，感兴趣可以去研究pdf.js源码。pdf.js带来相关问题就是如果对应的pdf文件中包含了pdf.js中不存在的字体，那么就无法完整渲染，另外渲染出来的字体和原本的。
js预览pdf文件
09-18
通过pdfobject.js预览PDF，亲测。 需要安装Adobe的。
牛客JS题（二十一）数组扁平化
不起眼小菜菜的博客
08-04 841
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 730
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 526
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2935
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 136
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
社交媒体分享预览图片和内容修改
最新发布
wangweiscsdn的博客
08-06 195
社交媒体分享链接时的预览图片和内容
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
ggq53219的博客
08-01 489
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
elementUI，vue，前端判断时间是否有交集(重合)方法
peepeeman的博客
08-01 412
前端根据24小时制，判断所选时间是否存在重复情况
探索 Electron：打造深度书籍挖掘机的搜索体验
ztK63LrD的博客
08-03 419
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
【Material-UI】Autocomplete 组件的局限性（Limitations）详解
lph159的博客
08-05 694
在某些情况下，您可能需要为 Autocomplete 组件提供自定义的。此时，务必确保滚动容器具有属性。这样可以确保在使用键盘导航时，滚动行为的正确性。虽然 Material-UI 的 Autocomplete 组件提供了强大的功能，但开发者在使用时需要注意其一些局限性。通过合理设置组件属性和处理可能出现的问题，可以提升组件的用户体验和可访问性。希望本文能帮助您更好地理解和应用 Autocomplete 组件中的局限性。如果您有任何问题或建议，欢迎交流探讨。
【问题解决方案】npm install报错问题：npm ERR! - 多种解决方案，总有一种可以解决
weixin_73002968的博客
08-01 845
欢迎技术类的问题到这里提出，我会逐个解答。
JavaScript青少年简明教程：面向对象编程入门
cnds123的专栏
08-01 1183
JavaScript青少年简明教程：面向对象编程入门
pdf文件预览 浏览器窗口名修改
05-25
您可以使用 JavaScript 来更改浏览器窗口的标题。以下是一个示例代码： ```javascript document.title = "新的窗口标题"; ``` 如果您想要在预览 PDF 文件时更改窗口标题，可以使用 PDF.js 库。您需要在 HTML 页面中嵌入 PDF.js，并在加载 PDF 文件时调用 JavaScript 函数来更改窗口标题。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> <script> function changeTitle() { document.title = "PDF 文件标题"; } function previewPDF() { var url = "path/to/my/file.pdf"; var pdf = null; // 加载 PDF 文件 pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) { pdf = pdfDoc_; // 显示第一页 pdf.getPage(1).then(function(page) { var canvas = document.getElementById('pdf-canvas'); var context = canvas.getContext('2d'); var viewport = page.getViewport({scale: 1}); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: context, viewport: viewport }); // 更改窗口标题 changeTitle(); }); }); } </script> </head> <body onload="previewPDF()"> <canvas id="pdf-canvas"></canvas> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值