需求及遇到的問(wèn)題描述
在公眾號(hào)網(wǎng)頁(yè)中預(yù)覽PDF文件溯香，起初想到的是使用ifram谬莹，使用結(jié)果，在web端瀏覽沒(méi)有問(wèn)題（根據(jù)域名配置不同可能會(huì)出現(xiàn)PDF所在的域名打開(kāi)直接下載逮刨，無(wú)法預(yù)覽）秽晚，但是在移動(dòng)端只能展示pdf的第一頁(yè)瓦糟，不能上下滑動(dòng)預(yù)覽全部。也有說(shuō)使用h5新標(biāo)簽embed的赴蝇，但是總是提示‘已禁止在此網(wǎng)頁(yè)上運(yùn)行flash’菩浙，本來(lái)想省事，不找插件實(shí)現(xiàn)需求，可是遇到太多坑劲蜻，無(wú)奈下選擇了pdfh5插件陆淀。我的項(xiàng)目技術(shù)是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(){
//實(shí)現(xiàn)方式一
axios
.get(this.url, {
responseType: 'arraybuffer'
})
.then(res => {
this.pdfh5 = new Pdfh5('#demo', {
data: res.data
});
});
//實(shí)現(xiàn)方式二
//先實(shí)例化
// this.pdfh5 = new Pdfh5("#demo", {
// pdfurl: this.url
// });
// this.pdfh5.on("complete", function (status, msg, time) {
//console.log("狀態(tài)：" + status + "，信息：" + msg + "先嬉，耗時(shí)：" + time + "毫秒轧苫，總頁(yè)數(shù)：" + this.totalNum)
//})
}
};
</script>
