h5使用pdf.js预览pdf文件

最新推荐文章于 2024-07-12 11:41:11 发布
最新推荐文章于 2024-07-12 11:41:11 发布
阅读量1.2w 收藏 4
点赞数 1
文章标签： 移动端pdf预览 pdf.js 使用pdf.js设置title 手机端打开pdf h5打开pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsyy1992/article/details/96452924
版权
本文介绍了如何在h5应用中利用pdf.js库预览PDF文件，包括从官方下载pdf.js，通过指定PDF文件路径进行预览，以及解决在移动端PDF标题显示问题的方法，如在部分设备上偶发设置标题失败时，采用iframe嵌套结合原生API设置标题。
摘要由CSDN通过智能技术生成

一.下载pdf.js
     官网地址:

     http://mozilla.github.io/pdf.js/


    pic1

下载稳定版本

       
解压以后会看到如下文件,将整个文件夹部署到服务端，这里我们先用本地服务进行测试，为了方便我们在hbuilder里测试一下



发现可以加载默认的pdf


 

那么怎么显示我们自己的pdf呢

需要在url上加上自己文件的路径

最低0.47元/天 解锁文章
蒲绒随风
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
H5移动端文件预览pdf
猫大人的博客
02-22 7307
需求：H5页面嵌入浙政钉，需要文件预览Pdf。！！先讲最终方案，兼容ios，安卓，鸿蒙多种系统手机，移动端和pc端的pdf预览方式 — pdf.js + iframe。
vue或uniapp项目使用pdf.js预览PDF文件
08-09
在Vue或UniApp项目中，预览PDF文件是一项常见的需求，尤其在开发阅读器或文档管理系统时。PDF.js是Mozilla开发的一个开源库，用于在浏览器中渲染PDF文档，支持多种平台和浏览器。在这个项目中，你将学习如何利用pdf....
pdfh5.js 基于pdf.js和jQuery，移动端PDF预览插件，可手势缩放，支持懒加载
QSWの
01-13 1678
pdfh5.js 基于pdf.js和jQuery，移动端PDF预览插件，可手势缩放，支持懒加载
h5 pdf 预览
11-04
用h5预览pdf所需要的js和css样式，不知道可以去看我的博客
【pdfjs+vue】vue中实现pdf预览并且内容可复制，点击内容链接可页面跳转
最新发布
LG_971124的博客
07-12 293
使用pdfjs插件，在vue中实现pdf预览，内容可复制，点击内容链接可以实现页面跳转功能。
h5 pdf预览
01-10
使用pdf.js实现在手机上预览pdf的功能。
h5页面预览pdf文件_H5怎么实现在线预览PDF
weixin_39576294的博客
02-23 3021
这次给大家带来H5怎么实现在线预览PDF，H5实现在线预览PDF的注意事项有哪些，下面就是实战案例，一起来看一下。简介PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.PDF.js is community-driven and supported by Mozilla Labs. Our goal...
H5 PDF预览
四月
07-28 338
<script src="./pdf/pdf.js"></script> <div id="container"> <div class="lightbox"></div> <div id="pop" class="pop"> </div> </div> <script type="text/javascri.
pdf.JS-前端无需跳转在线预览pdf功能
02-03
这个功能对于提升用户体验非常有用，因为用户可以在前端直接预览PDF文件，无需跳转到其他页面或下载文件。在移动设备和Web端都适用，特别适合在uni-app框架下开发应用。 uni-app是一个多端开发框架，它允许开发者...
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
PDF.js是Mozilla基金会开源的一个JavaScript库，专门用于在浏览器中渲染PDF文件，支持多种浏览器和设备。在uniapp中，我们可以通过引入PDF.js库，利用其提供的API来加载和展示PDF内容。 实现步骤大致如下： 1. **...
无插件H5，web预览pdf.zip
08-04
总结来说，"无插件H5，web预览pdf.zip"提供的是一种基于JavaScript的PDF预览方案，利用H5的技术特性，结合如PDF.js这样的库，实现了在多种设备和浏览器环境下无插件的PDF预览。这种技术在现代Web开发中具有广泛的...
H5实现pdf在线预览.rar
11-25
APP内嵌H5，实现pdf在线预览功能。使用方法：展示内容需转化成base64格式，并使用sessionStorage缓存保存，资源包内容需放置在同一级目录下面，在手机上及可打开预览。
H5+JS页面直接查看PDF文件
12-07
移动端H5+JS页面直接查看PDF文件，纯H5的将pdf通过canvas重新绘制成数据流，展示到页面上。
html5预览pdf文档
08-26
简约实用的demo，HTML5或者HTML预览 PDF 文件，本人已经使用过，项目也上线了，确保可以正常使用。
H5自动展示pdf文件，pdf.js
08-11
此包为H5在线展示pdf文件包
pdfh5.js移动端pdf预览
04-14
pdf预览，移动端h5页面实现pdf预览功能。结合pdf.js、pdf.worker.js一起使用。
安卓端微信 H5 实现在线 PDF 预览
Acer的博客
03-04 3849
安卓端微信浏览器无法实现 PDF 在线预览，搜索引擎的结果也不太理想，结合了几篇文章，终于实现了需求。废话不多说，手摸手教你如何使用pdf.js实现 PDF 在线预览。
H5页面实现pdf文件预览功能
weixin_45966674的博客
12-16 3819
看着很高大上的东西，确实只需要一个A标签就行了 <a target='_black' href='https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf'>预览PDF文件</a> 虽然看着很高大上 但真的不要太简单 ...
H5实现预览pdf（PC+移动端都可以）
山有木兮木有枝 心悦君兮君不知
08-15 4533
h5预览pdf
vue h5实现pdf文件预览
02-24
Vue H5可以通过使用第三方库来实现PDF文件的预览。一个常用的库是pdf.js，它是一个由Mozilla开发的JavaScript库，用于在网页上渲染PDF文件。 以下是实现PDF文件预览的步骤： 1. 安装pdf.js库：可以通过npm或者直接引入CDN来安装pdf.js库。 2. 创建一个Vue组件：在Vue项目中创建一个组件，用于显示PDF文件。 3. 引入pdf.js库：在组件中引入pdf.js库。 4. 加载PDF文件：使用pdf.js提供的API，加载需要预览的PDF文件。 5. 渲染PDF文件：使用pdf.js提供的API，将PDF文件渲染到页面上。 下面是一个简单的示例代码： ```vue <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 loadingTask = pdfjsLib.getDocument(pdfUrl) const pdf = await loadingTask.promise const page = await pdf.getPage(1) const canvas = this.$refs.pdfCanvas const context = canvas.getContext('2d') const viewport = page.getViewport({ scale: 1 }) canvas.height = viewport.height canvas.width = viewport.width const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext) } } } </script> ``` 在上面的示例中，我们使用了pdf.js库来加载和渲染PDF文件。首先，我们通过`getDocument`方法加载PDF文件，然后获取第一页的内容，并将其渲染到一个canvas元素上。 请注意，上述示例仅演示了基本的PDF文件预览功能，你可以根据自己的需求进行扩展和定制。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值