52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="up-pdf-reader" :style="{ height: height }">
|
|||
|
|
<web-view :fullscreen="false"
|
|||
|
|
:src="viewerUrl" :style="{ width: '750rpx', height: height }"
|
|||
|
|
:webview-styles="{ width: '750rpx', height: height }"
|
|||
|
|
frameborder="0"
|
|||
|
|
></web-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import props from './props.js';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* pdfReader PDF阅读器
|
|||
|
|
* @description 基于pdf.js的PDF阅读器组件
|
|||
|
|
* @tutorial https://uview-plus.jiangruyi.com/components/pdfReader.html
|
|||
|
|
* @property {String} src PDF文件地址
|
|||
|
|
* @property {String} height 组件高度，默认为'700px'
|
|||
|
|
* @property {String} pdfjsDomain pdfjs资源域名，默认为'https://uview-plus.jiangruyi.com/h5'
|
|||
|
|
* @example <up-pdf-reader src="https://example.com/file.pdf"></up-pdf-reader>
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'up-pdf-reader',
|
|||
|
|
mixins: [props],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
baseUrlInner: 'https://uview-plus.jiangruyi.com/h5',
|
|||
|
|
viewerUrl: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
baseUrl: function (val) {
|
|||
|
|
this.baseUrl = val;
|
|||
|
|
},
|
|||
|
|
src: function (val) {
|
|||
|
|
this.viewerUrl = `${this.baseUrlInner}/static/pdfjs/web/viewer.html?file=` + encodeURIComponent(val);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (this.baseUrl) {
|
|||
|
|
this.baseUrlInner = this.baseUrl;
|
|||
|
|
}
|
|||
|
|
this.viewerUrl = `${this.baseUrlInner}/static/pdfjs/web/viewer.html?file=` + encodeURIComponent(this.src);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.up-pdf-reader {
|
|||
|
|
}
|
|||
|
|
</style>
|