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

最新推荐文章于 2024-09-10 14:23:58 发布

ass_ace

最新推荐文章于 2024-09-10 14:23:58 发布

阅读量5.7k

点赞数 9

分类专栏： vue的学习笔记前端工具文章标签：移动端pdf预览 pdfh5 pdf 手势缩放

本文链接：https://blog.csdn.net/baidu_39067385/article/details/117876306

版权

本文介绍了如何在移动端通过pdfh5库来实现PDF在线预览功能，同时支持手势缩放。由于vue-pdf库存在一些问题，作者选择了pdfh5，该库提供了良好的预览效果和分页、缩放功能，提升了用户体验。详细介绍了引入pdfh5包和代码实现的步骤。

摘要由CSDN通过智能技术生成

最近接了一个需求需要在移动端预览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="$style.iconContain">
      <span :class="$style.iconClose" class="xiaoicon">&am