admin管理员组文章数量:1648926
uniapp 本地pdf预览
需要安装pdfh5插件
<view class="pdf">
<view id="demo"></view>
</view>
import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css";
pdfh5: null
this.pdfh5 = new Pdfh5('#demo', {
pdfurl: "/h5/static/sc.pdf"
// responseType: "arraybuffer" // blob arraybuffer
});
.pdf {
height: 90vh;
}
uniapp 线上pdf预览
uni.navigateTo({
url: './webview?data=' + item3.FILE_ID + '&title=' + item3.DIS_NAME
})
<template>
<uni-nav-bar left-icon="left" :fixed='true' :title='title' @clickLeft="leftClick" />
<view class="pdf">
<web-view :src="path" style="margin-top: 100rpx;"></web-view>
</view>
</template>
<script>
import {
getKnowledgeFile
} from '@/common/api.js'
import config from '@/common/config.js'
export default {
data() {
return {
title: '',
data: '',
fileID: '',
pdfUrl: '',
path: '',
}
},
mounted() {
},
onLoad(e) {
this.title = e.title;
this.fileID = e.data
uni.setNavigationBarTitle({
title: e.title,
})
this.getFile()
},
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$scope
.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
setTimeout(function() {
wv = currentWebview.children()[0];
wv.setStyle({
top: 35,
});
}, 100); //如果是页面初始化调用时，需要延时一下
// #endif
},
methods: {
leftClick() {
uni.navigateBack()
},
getFile() {
var key = '?jwtToken=' + uni.getStorageSync('PCM_TOKEN') + '&fileId=' + this.fileID
this.pdfUrl = config.baseUrl + '/kl/MOBILE_INTERFACE_SERVICES.downloadFile.do' + key
this.path = '/hybrid/html/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)
},
}
}
</script>
<style lang="scss" scoped>
.pdf {
height: 90vh;
}
</style>
react native pdf预览
需要下载react-native-pdf插件，页面写了翻页和页面跳转功能
this.props.navigation.navigate('pdfViewer', {
data: {
data: item3,
title: item3.DIS_NAME
}
})
import React, {Component} from 'react';
import {
View,
Text,
Dimensions,
TouchableOpacity,
StyleSheet, TextInput,
} from 'react-native';
import {default as config} from "../../../config/base";
import NavBarC from '../../../components/common/NavBarC';
import Pdf from 'react-native-pdf';
const {width, height} = Dimensions.get('window');
export default class pdfViewer extends Component {
static navigationOptions = {
header: null
};
constructor (props) {
super(props);
this.state = {
pdfUrl: '',
currentPage: 1,
totalPage: 1,
};
this.data = this.props.navigation.state.params.data ? this.props.navigation.state.params.data : {};
}
componentDidMount () {
this.data = this.props.navigation.state.params.data ? this.props.navigation.state.params.data : {};
if (this.data.data.FILE_ID) {
var pdfUrl = config.applicationIpAndPortPcm + 'MOBILE_INTERFACE_SERVICES.downloadFile.do' + '?jwtToken=' + global.pcmToken + '&fileId=' + this.data.data.FILE_ID;
this.setState({pdfUrl: pdfUrl});
} else {
var pdfUrlB = config.applicationIpAndPort + 'jdjhapi/sdc/engineeringStandardDocuments/preview/' + this.data.data.fileId + '?Authorization=' + global.Authorization;
this.setState({pdfUrl: pdfUrlB});
}
}
componentWillUnmount () {
}
render () {
const {pdfUrl, currentPage, totalPage} = this.state;
const source = {uri: pdfUrl, cache: true};
return (
<View style={styles.container}>
<NavBarC
goBack={() => {
this.props.navigation.goBack()
}}
midView={<Text style={{color: '#0F2646', fontSize: 15}}
numberOfLines={1}
ellipsizeMode={'tail'}>{this.data.title ? this.data.title : this.data.data.fileName}</Text>}
/>
<View style={styles.pdf}>
{
pdfUrl !== '' ?
<Pdf
ref={(pdf) => {
this.pdf = pdf;
}}
page={currentPage}
source={source}
onLoadComplete={(numberOfPages, filePath) => {
this.setState({totalPage: numberOfPages})
}}
onPageChanged={(page, numberOfPages) => {
this.setState({currentPage: page})
}}
onError={(error) => {
// console.log('s', error);
}}
enablePaging={true}
style={styles.pdfs}
/>
: null
}
</View>
<View style={styles.navigate}>
<TouchableOpacity
onPress={() => {
let currentPage = this.state.currentPage - 1
this.setState({currentPage: currentPage})
}}>
<Text style={styles.naviText}>上一页</Text>
</TouchableOpacity>
<View>
<Text style={styles.cenText}>{currentPage} / {totalPage}</Text>
</View>
<View style={styles.center}>
<Text style={styles.naviText}>前往</Text>
<View style={styles.input}>
<TextInput
placeholder='输入'
placeholderTextColor='#333333'
underlineColorAndroid='transparent'
keyboardType={'numeric'}
onChangeText={(text) => {
const number = parseInt(text, 10)
this.setState({currentPage: number})
}}
value={currentPage}
style={{fontSize: 15, color: '#333333', textAlign: 'center'}}/>
</View>
<Text style={styles.naviText}>页</Text>
</View>
<TouchableOpacity
onPress={() => {
let currentPage = this.state.currentPage + 1
this.setState({currentPage: currentPage})
}}>
<Text style={styles.naviText}>下一页</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EFEFF4',
},
pdf: {
flex: 1,
width: width,
height: height,
alignItems: 'center',
justifyContent: 'center'
},
pdfs: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
},
navigate: {
width: width - 30,
marginLeft: 15,
borderRadius: 20,
height: 50,
backgroundColor: 'gray',
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 0,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around'
},
center: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
width: 90,
},
naviText: {
color: "#fff",
textAlign: 'center',
fontSize: 13,
},
cenText: {
color: "#fff",
textAlign: 'center',
fontSize: 15,
},
input: {
width: 40,
height: 40,
backgroundColor: '#fff',
borderRadius: 10,
}
});
版权声明：本文标题：uniapp 和react native pdf预览 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729504274a1203443.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论