vue——移动端在线预览pdf并能缩放（pdfh5）

最新推荐文章于 2024-05-13 15:15:45 发布
最新推荐文章于 2024-05-13 15:15:45 发布
阅读量5.4k 收藏 20
点赞数 9
分类专栏： vue的学习笔记 前端工具 文章标签： 移动端pdf预览 pdfh5 pdf 手势缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_39067385/article/details/117876306
版权

最近接了一个需求需要在移动端预览pdf，并切要能缩放，百度发现大多推荐vue-pdf，但是vue-pdf这个包，安装之后运行报错，解决之后的实现效果不符合需求需要，而且，实现缩放功能的时候，整个canvas画布整个放大，虽然有放大效果，但是，画布无法滚动，交互体验实在是太差，最后找到pdfh5这个包，预览效果不错，而且支持手势缩放和分页功能。

pdfh5 的github地址：

https://github.com/gjTool/pdfh5

功能实现效果如下图：

1. 首先引入pdfh5包

npm i --save pdfh5

2. 代码实现如下：

<template>
  <div :class="$style.pdf" v-show="visible">
    <div @click="visible = false" :class
最低0.47元/天 解锁文章
ass_ace
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
实现PDF在线预览，并可以支持手势放大缩小
08-28
注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。 svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案 canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
VUE----移动端在线预览pdf 可上下滚动，大小缩放（pdfh5）
heavenz19的博客
12-03 2163
VUE----移动端在线预览pdf 可上下滚动，大小缩放（pdfh5） 1.安装需要的工具包 npm i --save pdfh5 2.写入组件 <template> <div :class="$style.pdf" v-show="visible"> <div @click="visible = false" :class="$style.iconContain"> <span :class="$style.iconClose" cla
vue h5项目预览pdf文件+电子签名
最新发布
lwaner的博客
05-13 392
vue h5项目预览pdf文件+电子签名。1、vue安装pdfh5。签字板canvas.js。
vue移动端pdf在线预览，并实现手势缩放、移动
weixin_45956838的博客
12-28 9044
通常我们会遇到ios手机不能下载文件的问题，那是因为苹果手机的拦截机制，这时我们只能通过别的方法来解决问题，我这里的解决方法是直接实现在线预览 pdf预览跟图片预览不同，pdf可能会有多张，而图片只有一张，使用图片预览的组件肯定是行不通的 这里我使用的是一个vue-pdf的插件，这是一个使用起来容易上手的插件。首先我们需要在vue项目中引入它： npm install --save vue-pdf 然后在展示pdf的页面引用 import pdf from ‘vue-pdf’ 要想让pdf实现
vue 手机移动端预览pdf
@you的博客
03-03 2731
最新需求是在手机实现pdf的预览，经过一番查询，采用的是pdfh5，可以保存为图片，比较方便 首先pdf返回的是pdf文件流 接收pdf文件流的时候需要设定文件类型responseType: 'arraybuffer' 首先下载pdfh5 npm i pdfh5 主要代码 <template> <div id="app"> <div id="demo"></div> </div> </templa.
在移动端通过vue-pdf实现预览pdf
weixin_30873847的博客
07-24 4728
应用场景：比赛报表pdf文件需要在线预览跟下载，发现直接使用window.open(url, '_blank')，在pc端是可以实现预览，但是在移动端是直接通过打开浏览器进行下载再预览，经查资料发现可以使用vue-pdf组件实现预览！！！ 参考：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html GitHub...
vue实现移动端在线预览pdf
ababbaqq的博客
12-14 1809
1.安装vue-pdf 命令:npm install --save vue-pdf 安装的版本为 2.代码块 <template> <div class="pdf"> <p class="arrow"> <span @click="changePdfPage(0)" class="turn">上一页</span> {{currentPage}} / {{pageCount}} <span
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
本教程将详细讲解如何在uniapp移动端通过H5实现PDF和其他文件的在线预览功能。通过提供的源码和注解，开发者可以深入理解其实现机制，并在自己的项目中进行应用。 首先，我们需要了解uniapp的组件系统。uniapp允许...
vue实现pdf文档在线预览功能
10-15
在Vue项目中实现PDF文档在线预览功能，主要依赖于`pdf.js`插件，它是一个JavaScript库，能够解析PDF文件并将其渲染到HTML5的Canvas元素上。下面我们将详细探讨如何在Vue环境中集成和使用`pdf.js`来实现这个功能。 ...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端h5打开pdf项目源码，可手势捏合缩放，分段加载
07-25
终极版地址https://download.csdn.net/download/fade999/11614450
移动端h5打开pdf项目源码，可手势捏合缩放，分段加载（终极版）
08-26
移动端h5打开pdf项目源码。基于pdf.js和jQuery，可手势捏合缩放，分段加载，支持canvas和svg两种渲染pdf模式，不支持本地绝对路径，支持相对路径和网络路径，支持ajax和fetch两者请求方式。在Android和IOS的webview上均可使用。http://www.gjtool.cn
全端兼容的前端h5预览pdf插件
03-22
全端兼容的前端h5预览pdf插件,开箱即用，完美兼容PC和移动端 直接引用pdf.html?file=/upload/pdf.pdf即可
pdfh5：webh5移动端PDF预览插件
02-04
pdfh5.js基于pd​​f.js和jQuery，web / h5 /移动端PDF预览手势插件。 注意：本地绝对路径地址不能加载，跨域问题用代理或服务端解决。 svg模式渲染存在缺陷，只能渲染普通pdf，带签名，印章的可能会渲染不全，...
vue中使用pdf预览插件pdfh5
不靠谱的作曲家
06-16 392
pdfh5官方npm pdfh5博客主页
h5 pdf预览 vue适用
qq_34200636的博客
03-28 1470
h5 pdf预览 vue适用
vue 移动端h5预览PDF
05-27
要在Vue移动端H5中预览PDF，你可以使用第三方库pdf.js。pdf.js是一个开源的JavaScript库，它可以在Web浏览器中渲染PDF文档，无需使用插件或Adobe Acrobat Reader。 首先，你需要在Vue项目中安装pdf.js库，可以使用npm进行安装： ``` npm install pdfjs-dist ``` 安装完成后，在需要预览PDF的组件中引入pdf.js： ``` import pdfjsLib from 'pdfjs-dist'; ``` 在mounted生命周期中加载PDF文档： ``` mounted() { // 加载PDF文档 const loadingTask = pdfjsLib.getDocument("your_pdf_file_url.pdf"); loadingTask.promise.then((pdf) => { // 获取第一页 pdf.getPage(1).then((page) => { // 获取canvas元素 const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1 }); // 为canvas设置宽高 canvas.width = viewport.width; canvas.height = viewport.height; // 渲染第一页 page.render({ canvasContext: context, viewport: viewport }); }); }); } ``` 在template中添加canvas元素： ``` <template> <canvas id="pdf-canvas"></canvas> </template> ``` 这样就可以在Vue移动端H5中预览PDF了。当然，你可以根据需要添加更多的功能，比如翻页、缩放等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值