mode

src/api/request.js

@@ -80,7 +80,7 @@ const api = {
       axios.get(
         path, { params: data }, { responseType: 'blob' })
         .then(function (response) {
-          const blob = new Blob([response.data]);
+          const blob = new Blob([response.data],{ type: 'application/pdf' });
           resolve(window.URL.createObjectURL(blob));
         })
         .catch(function (error) {

src/assets/style/general.css

@@ -206,3 +206,8 @@ span {
   margin: 20px 0;
 }
 
+.react-pdf__Page{
+  display: flex;
+  justify-content: center;
+}
+

src/pages/home/branch/manage/rate/rate.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Input, Button, Modal, Pagination } from 'antd'
+import { Input, Button, Modal, Space } from 'antd'
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import FeTable from '@/components/table'
 import api from "@/api/request"
 import { connect } from 'react-redux';
@@ -20,12 +21,12 @@ class ManageRate extends Component {
       visible: false,
       file: "",
       page: 1,
-      totalPage: [],
+      numPages: null,
     }
   }
 
-  componentDidMount(){
-    this.onDocumentLoadSuccess()
+  componentDidMount() {
+
   }
 
   onSearch = (value) => {
@@ -64,14 +65,24 @@ class ManageRate extends Component {
     })
   }
 
-  onDocumentLoadSuccess = (value) => {
-    var data = []
-    for (let i in value.numPages) {
-      data.push(i)
+  onDocumentLoadSuccess = ({ numPages }) => {
+    this.setState({ numPages })
+  }
+
+  prePage = () => {
+    if (this.state.page > 1) {
+      this.setState({
+        page: this.state.page - 1
+      })
+    }
+  }
+
+  nextPage = () => {
+    if (this.state.page < this.state.numPages) {
+      this.setState({
+        page: this.state.page + 1
+      })
     }
-    this.setState({
-      totalPage: data
-    })
   }
 
   handelOnChange = (page) => {
@@ -82,13 +93,15 @@ class ManageRate extends Component {
 
   onCancel = () => {
     this.setState({
-      visible: false
+      visible: false,
+      page: 1
     })
   }
 
   onConfirm = () => {
     this.setState({
-      visible: false
+      visible: false,
+      page: 1
     })
   }
 
@@ -109,21 +122,20 @@ class ManageRate extends Component {
           title="预览"
           okText="确 认"
           cancelText="取 消"
-          width="80%"
+          width="50%"
           onCancel={this.onCancel}
           onOk={this.onConfirm}
+          footer={[
+            <p ><Space><LeftOutlined style={{ fontSize: '16px' }} onClick={this.prePage} /><span style={{ fontSize: '16px' }}>{this.state.page} of {this.state.numPages} </span><RightOutlined style={{ fontSize: '16px' }} onClick={this.nextPage} /></Space></p>
+          ]}
         >
           <Document
             file={this.state.file}	//文件路径
             onLoadSuccess={this.onDocumentLoadSuccess} //成功加载文档后调用
             onLoadError={console.error} //加载失败时调用
-            renderMode="canvas"	 //定义文档呈现的形式
             loading="正在努力加载中" //加载时提示语句
-            externalLinkTarget="_blank"
           >
-            {this.state.totalPage.map(item => {
-              return <Page pageNumber={item} />
-            })}
+            <Page pageNumber={this.state.page} />
           </Document>
         </Modal>
         <Search placeholder="检索评价" onSearch={this.onSearch} enterButton style={{ width: 300, marginBottom: 20 }} />