项目需求 前端上传一个pdf文件后, 需要预览此pdf文件, 通过一系列调后端接口, 拿到一个存放该pdf的链接, 根据此链接打开pdf文件 如何操作???

查阅资料得知有个 react-pdf

首先需要安装react-pdf包 npm install react-pdf --save

组件引用及使用代码

import React, { Component } from 'react';
import { Document, Page } from './pdf-modules/react-pdf/entry.webpack';
// import { pdfjs, Document, Page } from 'react-pdf'
// pdfjs.GlobalWorkerOptions.workerSrc = `pdfjs/build/pdf.worker.js`;
import { Modal, Pagination, Button, notification } from 'antd';
import 'react-pdf/dist/Page/AnnotationLayer.css' // 加入这个css可以显示pdf中的批注以及连接
export default class ViewPDFModal extends Component {
  state = {
    numPages: 0,
    pageNumber: 1,
  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  onLoadError = (error) => {
    notification.error({
      message: '文件损坏无法预览',
    //console.log('--------onLoadError-------', error);
  onSourceError = (error) => {
    //console.log('--------onSourceError-------', error);
  onChange = (page) => {
    this.setState({
      pageNumber: page,
  render () {
    const { pageNumber, numPages } = this.state;
    const { name } = this.props;
    const fileType = name && name.substring(name.lastIndexOf('.') + 1);
    return (
      <Modal
        closable={false}
        visible={this.props.visible}
        onCancel={this.props.onCancel}
        width={1000}
        footer={(
            <Button style={{ visibility: 'middle' }} onClick={this.props.onCancel}>
            </Button>
            (fileType === 'jpg' || fileType === 'png' || fileType === 'jpeg')
                <img src={this.props.url} width={600} />
                {' '}
          {fileType === 'pdf'
              <Document
                options={{
                  cMapUrl: 'pdfjs/cmaps/',
                  cMapPacked: true,
                file={this.props.url} // 预览pdf的路径
                onLoadSuccess={this.onDocumentLoadSuccess}
                onSourceError={this.onSourceError}
                onLoadError={this.onLoadError}
                scale={0.8}
                error="文件损坏无法预览"
                loading="加载中......"
                <div className={'modal-pdf-layout'}>
                  <Page pageNumber={pageNumber} />  // 分页
                <div style={{ textAlign: 'right', visibility: 'middle', marginBottom: 30 }}>
                  <Pagination
                    style={{ visibility: 'middle' }}
                    defaultCurrent={pageNumber}
                    defaultPageSize={1}
                    total={numPages}
                    onChange={this.onChange}
              </Document>
      </Modal>
翻页的话动态修改pageNumber就行
 
如果想要一屏展示 Page改写一下
 
   new Array(numPages).fill('').map((item, index) => {
     return <Page key={index} pageNumber={index} />
我在上面代码引用 import { Document, Page } from './pdf-modules/react-pdf/entry.webpack'; 其实和 import { pdfjs, Document, Page } from 'react-pdf' 是一样的 为什么我本地改写了呢?
 是因为电子签章不出来!
 所以我在本地修改了一段代码 :
 
if (data.fieldType === "Sig") {
      data.fieldValue = null;
      this.setFlags(AnnotationFlag.HIDDEN);
注释掉! 才可以显示电子签章!
 
 
如果提示文件损坏无法预览 也有可能是后端返回的url不对, 记得在浏览器里面先下载看是否可以查看
                    项目需求 前端上传一个pdf文件后, 需要预览此pdf文件, 通过一系列调后端接口, 拿到一个存放该pdf的链接, 根据此链接打开pdf文件 如何操作???查阅资料得知有个react-pdf首先需要安装react-pdf包 npm install react-pdf --save组件引用及使用代码import React, { Component } from 'react';import { Document, Page } from './pdf-modules/react-pdf/entry
此包用于显示现有的 PDF。
如果您希望使用 React 创建 PDF，您可能正在寻找 @react-pdf/renderer。
tl;dr 通过执行 npm install react-pdf 或 yarn add react-pdf 进行安装。
通过添加 import { Document } from 'react-pdf' 来导入。
通过添加使用
文件可以是 URL、base64 内容、Uint8Array 等。
里面的组件
渲染页面。
演示 在示例目录中可以找到一个最小的演示页面。
在线演示也可用！
在继续之前 React-PDF 正在不断开发中。
本文档是为 React-PDF 5.x 分支编写的。
如果您想查看其他版本的 React-PDF 的文档，请使用 GitHub 页面顶部的下拉菜单切换到适当的标签。
以下是每个分支最新文档的快速链接： v4.x v3.x v2.x v1.x 入门兼容性 React 要使用最新版本的 React-PDF，您的项目需要使用 Re
在下载后可能会遇到以下报错，
This dependency was not found: worker-loader!pdfjs-dist/build/pdf.worker.js in......；
这时候直接npm install -g worker-loader 即可解决上述问题。
2、项目中引用
import PDFJS from 'pdfjs-dist';
import PropTypes from 'prop-types';
4. 显示印章
客户在浏览器中使用开源PDF.JS插件预览签署后的PDF文件时会遇到无法显示电子签章的情况，这是因为PDF.JS因无法进行校验电子签名故而默认隐藏了电子签章。
如果需要显示电子签章则需要在中找到以下代码并进行注释
或者某些版本的PDF.JS需要在pdf.worker.js中找到如下代码并进行注释
最后看下效果图......
开始需求的时候我使用的是iframe标签去实现的，如下代码，因为返回来的是一个文件对象，需要使用Blob实例化，上面是官网的blob资料，这里v是一个Blob数据，然后使用createObjectUrl将blob转为服务器上的url地址，然后展示即可
const res: any = await fetch(`${selected_content?.doc_type}`);
          res.blob().then(
				
react 显示pdfIt’s pretty easy to embed a PDF file into your website, but this might give your users more access than you would like. 将PDF文件嵌入到您的网站中非常容易，但这可能会使您的用户获得比您想要的更多的访问权限。 
Maybe you want to show ...
				
你可以使用pdf-lib库来在React中处理PDF文件。首先，你需要在你的React项目中安装pdf-lib库。然后，你可以使用以下代码来读取一个PDF文件：
import { PDFDocument } from 'pdf-lib';
const url = 'https://example.com/my-pdf-file.pdf';
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
接下来，你可以使用pdf-lib库提供的各种方法来编辑和处理PDF文件。例如，你可以使用以下代码来添加一个新页面：
const { width, height } = pdfDoc.getPage().getSize();
const page = pdfDoc.addPage([width, height]);
page.drawText('Hello World!', {
  x: 5,
  y: height / 2 + 300,
  size: 50,
最后，你可以使用以下代码将PDF文件保存到本地或上传到服务器：
const pdfBytes = await pdfDoc.save();
// 保存到本地
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
saveAs(blob, 'my-edited-pdf-file.pdf');
// 上传到服务器
const formData = new FormData();
formData.append('pdfFile', new Blob([pdfBytes], { type: 'application/pdf' }), 'my-edited-pdf-file.pdf');
const response = await fetch('https://example.com/upload-pdf-file', {
  method: 'POST',
  body: formData,
希望这可以帮助你在React中使用pdf-lib库处理PDF文件。