React 移动端端 PDF 组件

mz 前端开发组提供

安装

yarn

yarn add mz-front-react-pdf

npm

npm i mz-front-react-pdf

使用

基本使用

import React from "react"
import ReactDom from "react-dom"
import MobilePDFReader from "mz-front-react-pdf"

export default () => {
	return (
		<div>
			<MobilePDFReader url="你的PDF文件地址" />
		</div>
	)
}

配置信息使用

import React from "react"
import ReactDom from "react-dom"
import MobilePDFReader from "mz-front-react-pdf"
const App = () => {
	return (
		<div>
			<MobilePDFReader
				url="你的PDF文件地址"
				defaultPage={1}
				onDocumentComplete={({ currentPage, totalPage }) => {
					console.log(`当前页数:${currentPage}`)
					console.log(`总页数:${totalPage}`)
				}}
				onPageChanged={currentPage => {
					console.log(`当前第几页:${currentPage}`)
				}}
			/>
		</div>
	)
}

ReactDom.render(<App />, document.getElementById("app"))

API

| 参数 | 说明 | 类型 | | ------------------ | ---------------- | ------------------------------------ | | defaultPage | 起始页数 | number | | onDocumentComplete | PDF 加载完成回调 | Function( {currentPage, totalPage} ) | | onPageChanged | PDF 页数改变回调 | Function( currentPage ) |