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