1、pdfh5 gitee
2、安裝文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-506976.html
npm i pdfh5
3、使用及實(shí)現(xiàn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-506976.html
<template>
<div>
<head-title :navTitle="navTitle" @onGoBack="goBack">
<div id="pdf" @click="clickImg" />
<!-- 圖片預(yù)覽組件 -->
<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滾動(dòng)
this.pdfh5.scrollEnable(true);
// 請(qǐng)求成功的回調(diào)
this.pdfh5.on("success", () => {
const list = [];
// 通過(guò) document.images 獲取所有HTML圖片元素的集合,并將HTMLCollection格式(HTML元素的集合)轉(zhuǎn)換成普通數(shù)組
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>
到了這里，關(guān)于vue+vant+pdfh5：實(shí)現(xiàn)點(diǎn)擊 pdf 預(yù)覽所有圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![uniapp - [微信小程序] 實(shí)現(xiàn)點(diǎn)擊預(yù)覽各種文件 pdf文檔、視頻mp4、mp3音樂(lè)、圖片圖像、word/excel/ppt 等，uniapp小程序文件預(yù)覽功能（詳細(xì)示例代碼，一鍵復(fù)制開(kāi)箱即用）](https://imgs.yssmx.com/Uploads/2024/02/755973-1.png)
