vue+vant+pdfh5：实现点击 pdf 预览所有图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+vant+pdfh5：实现点击 pdf 预览所有图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、pdfh5 gitee
2、安装

npm i pdfh5

3、使用及实现文章来源地址https://www.toymoban.com/news/detail-506976.html

<template>
  <div>
    <head-title :navTitle="navTitle" @onGoBack="goBack">
      <div id="pdf" @click="clickImg" />
      <!-- 图片预览组件 -->
      <van-image-preview v-model="show" :images="imgList" @change="onChange">
        <template v-slot:index>{{ index + 1 +'/'+ imgList.length}}</template>
      </van-image-preview>
    </head-title>
  </div>
</template>

<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { baseURL } from "@/config";

export default {
  name: "basic-info",
  data() {
    return {
      imgList: "", //
      navTitle: "",
      pdfh5: null,
      show: false,
      index: 0,
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.initPdf();
  },
  methods: {
    init() {
      let { name } = this.$route.query;
      this.navTitle = name;
    },
    initPdf() {
      this.pdfh5 = new Pdfh5("#pdf", {
        pdfurl: baseURL,
        goto: 1, // 回到顶部
      });
       // 允许pdf滚动
      this.pdfh5.scrollEnable(true);
      // 请求成功的回调
      this.pdfh5.on("success", () => {
        const list = [];
        // 通过 document.images 获取所有HTML图片元素的集合,并将HTMLCollection格式(HTML元素的集合)转换成普通数组
        const imageList = Array.prototype.slice.call(document.images)
        imageList .forEach((el) => {
          list.push(el.currentSrc);
        });
        this.imgList= list;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    clickImg() {
      this.show = true;
    },
    onChange(index) {
      this.index = index;
    },
  },
};
</script>