记录Vue项目中使用Pdfh5.js-(移动端手势缩放)遇到的坑-一一网

这是我参与新手入门的第2篇文章

前言：

这两天老大让我写个功能，是iPad上的文件预览优化，由原来的点击放大、缩小按钮，改为手势缩放，经历了原生touch移动端事件及pdf插件的替换一系列难熬过程，还好最后完成功能，特此记录下来，也希望给大家一点帮助。

pdfh5网上介绍也挺详细，那我就捡点项目中遇到的坑来讲啦！

避坑一: 样式引入报错

// 网站上写的引入pdfh5.css方式如下:
<style>
    @import "pdfh5/css/pdfh5.css";
</style>
复制代码

报错：this dependency was not found:……
解决方案：不用@import,而是在script里引入

import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';  //在这里引入
复制代码

避坑二: 出现tabs栏切换，却只渲染一个页面，其他页面为空白

项目需求是tab栏，点击不同tab，切换到不同的PDF文件预览页面，</br>
那就需要封装pdf组件，遍历tab栏，每个tab向pdf组件中传入要渲染的PDF文件。
复制代码

…… 父组件主要代码如下：
<van-tabs v-model="activeTab">
    <van-tab
        v-for="(item,index) in tabsList"
        :title="item.name"
        :key="index"
        >
            <template>
                <pdf :pdfUrl="项目中的文件路径"></pdf>
            </template>
    </van-tab>
</van-tabs>
 ……
 
复制代码

子组件(pdf)文件代码如下：
<template>
    <div class="main">
        <div id="canvasPdf" style="100%"></div>
    </div>
</template>
<script>
    import Pdfh5 from 'pdfh5';
    import 'pdfh5/css/pdfh5.css';
    export default {
        props:{
            //接收从父组件传来的文件路径
            pdfUrl: {
                type: String,
                default:''
            }
        },
        data(){
            return {
                pdfh5: null
            }
        },
        mounted(){
            this.pdfh5 = new Pdfh5("canvasPdf", {
                pdfUrl: this.pdfUrl,
                zoomEnable: true   //控制是否支持缩放的属性，默认为true
            })
        }
    }
</script>
<style> 

</style>
复制代码

预期: 点击tab切换，渲染不同页面
效果: 只在第一个页面展示，其他页面为空白
原因： id是唯一的，id名写死，只会渲染一个
解决思路： 给每个tab,动态命名id
关键代码如下：

//父组件代码动态传 id
<van-tabs v-model="activeTab">
    <van-tab
        v-for="(item,index) in tabsList"
        :title="item.name"
        :key="index"
        >
            <template>
                //新增 传递id
                <pdf :pdfUrl="项目中的文件路径" :id="tab-${index}"></pdf>
            </template>
     </van-tab>
 </van-tab>
//子组件 props接收 id
<template>
    <div class="main">
        <div id="canvasPdf" style="100%"></div>
    </div>
</template>
<script>
    import Pdfh5 from 'pdfh5';
    import 'pdfh5/css/pdfh5.css';
    export default {
        props:{
            //接收从父组件传来的文件路径
            pdfUrl: {
                type: String,
                default:''
            },
            // 新增 接收从父组件传来的id
            id: {
                type: String,
                default: ''
            }
        },
        data(){
            return {
                pdfh5: null
            }
        },
        mounted(){
            // 新增  id 用模板字符串 展示
            this.pdfh5 = new Pdfh5(`#${id}`, {
                pdfUrl: this.pdfUrl,
                zoomEnable: true   //控制是否支持缩放的属性，默认为true
            })
        }
    }
</script>
<style> 

</style>
复制代码

效果实现，既能手势缩放，还可以在不同的tab里渲染不同的PDF文件！