vue（h5）移动端预览PDF(pdfh5)

需求及遇到的问题描述

在公众号网页中预览PDF文件，起初想到的是使用ifram，使用结果，在web端浏览没有问题（根据域名配置不同可能会出现PDF所在的域名打开直接下载，无法预览），但是在移动端只能展示pdf的第一页，不能上下滑动预览全部。也有说使用h5新标签embed的，但是总是提示‘已禁止在此网页上运行flash’，本来想省事，不找插件实现需求，可是遇到太多坑，无奈下选择了pdfh5插件。我的项目技术是vue

image.png

pdfh5使用

• 安装

yarn add pdfh5

• 核心代码

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>
<script>
    import Pdfh5 from "pdfh5";
    import "pdfh5/css/pdfh5.css";
    import axios from 'axios';
    export default {
        name: 'Image',
        data() {
            return {
                url: "",
                pdfh5: null
            };
        },
        created(){
            this.url = this.$route.query.url
        },
        mounted(){
           //实现方式一
            axios
            .get(this.url, {
                responseType: 'arraybuffer'
            })
            .then(res => {
                this.pdfh5 = new Pdfh5('#demo', {
                    data: res.data
                });
            });
          //实现方式二
          //先实例化
          // this.pdfh5 = new Pdfh5("#demo", {
          //   pdfurl: this.url
          // });
          // this.pdfh5.on("complete", function (status, msg, time) {
        //console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
      //})
        }
    };
</script>

文章参考里面有更加详细的讲解