react-移动端&pc预览pdf文件

1.点击访问代码地址：

https://github.com/wangchun123/react-Ant-Design-Mobile

2.前提准备工作：

1.本次主要讲移动端预览，你要有一个移动端配置框架，如果没有准备好，访问上面的链接可以下载运行（否则会出现样式混乱）

2.npm i react-read-pdf --save

3.想看详细api可以访问 https://www.npmjs.com/package/react-read-pdf

3.开始介绍代码：

1.直接访问本地的pdf地址。

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';
import { Button } from 'antd-mobile';
import ReactDOM from 'react-dom';

export default class Pdf extends React.Component {
  constructor() {
    super();
    this.state = {
      local: false,
      text: false,
    };
  }

  componentDidMount() {}

  render() {
    const { local, text } = this.state;

    return (
      <>
        <Button
          onClick={() => this.setState({ local: !local, text: !text })}
          type="primary"
          size="large"
        >
          {text ? '关闭本地pdf' : '访问本地pdf'}
        </Button>

        {local && (
          <MobilePDFReader
            url={require('../../assets/test.pdf')}
            isShowHeader={false}
          />
        )}
      </>
    );
  }
}

 

2.异步访问pdf数据（重点）

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';
import { Button } from 'antd-mobile';
import ReactDOM from 'react-dom';

export default class Pdf extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
//异步请求数据不要存入state里面，拿到数据之后可以处理成功base64直接赋值给url记得如果没有base64前坠要拼接上去。
//以下书写，避免了节点渲染完，数据还没一起呈现。原因应该来自组件封装问题，（也是一个比较隐蔽的坑）
    setTimeout(() => {

      ReactDOM.render(
        <MobilePDFReader
          url={require('../../assets/test.pdf')}
          isShowHeader={false}
        />,
        document.body,
      );

    }, 2000);
  }

  render() {
    return <></>;
  }
}

4.预览效果：

5.总结

1.url可以是本地路径地址，书写上注意是require('../../assets/test.pdf')不是../../assets/test.pdf

2.pdf是后端返回的流文件或者是base64，记得先转base64在给url，还有就是书写上采用上图异步访问pdf数据代码。

 ReactDOM.render(
            <MobilePDFReader
              url={'data:application/pdf;base64,' + `${addDateTar}`}//addDateTar来源后端返回的base64
              isShowHeader={false}
            />,
            document.getElementById('mockPdf'),
          );