uniapp 和react native pdf预览

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,
  }
});