通过接口拿到第三方的链接,然后判断不同环境,比如app, h5,小程序等等,用对应的方法打开一个新的webview打开链接展示,但是没想到里面又pdf。然后在ios上,h5无法展示。
换个思路,第三方链接,会返回一个type类型,如果是pdf。那给拼接上一个h5的地址,然后用webview打开。
h5的地址就是一个展示pdf的作用。比如我们的 https://medicaluat.mobile.taikang.com/active/pdfViewer/index.html#/pdfView?pdfUrl=后面跟pdf的链接
https://medicaluat.mobile.taikang.com/active/pdfView/index.html#/pdfViewer?pdfUrl=https%3A%2F%2Ftlifehealth.taikang.com%2Factive%2Fimg%2Fpdf%2F202303301413.pdf
实现 pdfViewer.vue
依赖
"pdfjs-dist": "^2.5.207",
"pdfvuer": "^1.6.1",
"vconsole": "^3.3.0",
"vue": "^2.6.6",
"vue-pdf": "^4.2.0",
<template>
<div id="pdfvuer" class="pdfvuer">
<pdf
ref="pdf"
:src="pdfdata"
v-for="i in numPages"
:rotate="pageRotate"
:key="i"
:id="i"
:page="i"
:scale.sync="scale"
></pdf>
<!-- 当前页/总页数 -- 滑动的时候,当前页不变,直接给去掉了>
<!-- <div class="pageNum">{{ page }}/{{ numPages }}</div> --> <!-- 下方tab栏 -->
<div class="pdf-tab">
<div
v-for="(item, i) in tabItem"
:key="i"
>
<div
class="operate-item"
@click.stop="item.func"
>
<img
:class="{
radioImg: item.imgSize == 'radio',
flatImg: item.imgSize == 'flat',
}"
:src="img_base_url + item.icon"
alt=""
/>
<div class="txt">{{ item.txt }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import pdfvuer from 'pdfvuer';
export default {
components: {
pdf: pdfvuer,
},
data() {
return {
page: 1,
numPages: 0,
pdfdata: undefined,
errors: [],
scale: 'page-width', //放大系数
pageRotate: 0,
pdfUrl: '',
tabItem: [
{
//下方tab栏
func: this.clock,
icon: 'rotate_icon.png',
txt: '翻转',
imgSize: 'radio',
},
// {
// func: this.prePage,
// icon: 'pre_icon.png',
// txt: '上一页',
// imgSize: 'flat',
// },
// {
// func: this.nextPage,
// icon: 'next_icon.png',
// txt: '下一页',
// imgSize: 'flat',
// },
{
func: this.scaleD,
icon: 'magnify_icon.png',
txt: '放大',
imgSize: 'radio',
},
{
func: this.scaleX,
icon: 'reduce_icon.png',
txt: '缩小',
imgSize: 'radio',
},
],
};
},
mounted() {
let queryData = this.$route.query;
if(!!queryData.pdfUrl){
this.pdfUrl = queryData.pdfUrl
this.getPdf();
}
},
watch: {
show: function (s) {
if (s) {
this.getPdf();
}
},
page: function (p) {
if (
window.pageYOffset <= this.findPos(document.getElementById(p)) ||
(document.getElementById(p + 1) &&
window.pageYOffset >= this.findPos(document.getElementById(p + 1)))
) {
document.getElementById(p).scrollIntoView();
}
},
},
methods: {
// 上一页
prePage() {
let p = this.page;
p = p > 1 ? p - 1 : 1;
this.page = p;
},
// 下一页
nextPage() {
let p = this.page;
p = p < this.numPages ? p + 1 : 1;
this.page = p;
},
// 左滑动翻页
nextPageLeft() {
if (this.scale == 100) {
this.nextPage();
} else {
return;
}
},
// 顺时针旋转
clock() {
this.pageRotate += 90;
},
// 逆时针旋转
counterClock() {
this.pageRotate -= 90;
},
//放大
scaleD() {
this.scale += 0.2;
},
//缩小
scaleX() {
if (this.scale <= 0.2) return false;
this.scale += -0.2;
},
getPdf() {
var self = this;
self.pdfdata = pdfvuer.createLoadingTask(this.pdfUrl)
self.pdfdata.then((pdf) => {
self.numPages = pdf.numPages;
window.onscroll = function () {
changePage();
stickyNav();
};
// Get the offset position of the navbar
// var sticky = $('#buttons')[0].offsetTop;
// Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyNav() {
// if (window.pageYOffset >= sticky) {
// $('#buttons')[0].classList.remove('hidden');
// } else {
// $('#buttons')[0].classList.add('hidden');
// }
}
function changePage() {
var i = 1,
count = Number(pdf.numPages);
do {
if (
window.pageYOffset >= self.findPos(document.getElementById(i)) &&
window.pageYOffset <= self.findPos(document.getElementById(i + 1))
) {
self.page = i;
}
i++;
} while (i < count);
if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
self.page = i;
}
}
});
},
findPos(obj) {
return obj.offsetTop;
},
},
};
</script>
<style lang="less" scoped>
// #buttons {
// margin-left: 0 !important;
// margin-right: 0 !important;
// }
/* Page content */
.pdfvuer {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 667px;
width: 100%;
margin: 0 auto;
overflow: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
font-size: 0.28rem;
padding-top: 5px;
background-color: #f4f6fc;
}
.content {
padding: 16px;
}
.pageNum {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 80px;
background: #e6e9f4;
border-radius: 3px;
font-family: PingFang-SC-Regular;
font-size: 16px;
color: #9b9b9b;
text-align: center;
line-height: 16px;
position: fixed;
bottom: 60px;
left: 142px;
}
.pdf-tab {
position: fixed;
background-color: #fff;
width: 100%;
bottom: 0px;
left: 0;
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 10px 40px;
box-sizing: border-box;
.operate-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.radioImg {
width: 20px;
height: 20px;
}
.flatImg {
width: 12px;
height: 20px;
}
.txt {
margin-top: 5px;
font-family: PingFang-SC-Regular;
font-size: 11px;
color: #9b9b9b;
text-align: center;
line-height: 12px;
}
}
.paddingRight50 {
padding-right: 50px;
}
.paddingLeft20 {
padding-left: 20px;
}
}
</style>
网友评论