reactjs - React - 动态导入pdf文件的路径

Question

首先，我的页面将向 API 发出 http 请求

API 然后响应一个对象，该对象具有path: ./assets/sample.pdf

我想urlPdf从import urlPdf from response.path

我怎样才能做到这一点 ？

标签： reactjsimportrequire

Answer 1

我会尝试使用https://www.npmjs.com/package/react-pdf

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

const App = () => {
  const [pageNumber, setPageNumber] = useState();
  const [numPages, setNumPages] = useState();
  const [urlPdf, setUrlPdf] = useState();

  const _onDocumentLoadSuccess = ({ numPages }) => setNumPages(numPages);
  
  const fetchPdfPath = ({
    // logic handle get path...
    // setUrlPdf(response.data);
  })
  
  return (
    <div>
      {urlPdf && (
        <Document
          file={urlPdf}
          onLoadSuccess={_onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      )}
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}