Question

如果导入文件，我可以渲染它，但是不能从路径动态显示

我尝试同时使用react-pdf和iframe。

下面的工作，

 import pdf from './shared/B.pdf';
 <Document file={pdf}> <Page pageNumber={1} /> </Document> 
 <iframe src= {pdf}/>

以下内容不起作用

<Document file='./shared/B.pdf'> <Page pageNumber={1} /> </Document> 
<iframe src= './shared/B.pdf'/>

我需要不导入它，因为我将在运行时获取文件路径。有人可以帮忙吗？

Answer 1

尝试react-pdf

该库使在响应中嵌入PDF非常容易，例如：

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

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="somefile.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>Page {pageNumber} of {numPages}</p>
      </div>
    );
  }
}

正如您可以从库的源代码中看到的那样，以反应方式呈现PDF并不像您想象的那样简单。

另一种方法是使用<embed />：

<embed src="files/myfile.pdf" type="application/pdf" width="100%" height="600px" />

Answer 2

使用导入时，create-react-app随附的捆绑程序会自动将导入的资源打包到构建源中。

如果要使用文件而不导入文件，则需要以某种方式配置捆绑程序以打包这些文件。

使用create-react-app实现此目的最简单的方法是将所需文件移至public folder中。

因此，如果您具有以下目录结构，则该方法应该起作用：

public
|-- shared
|  |-- B.pdf

Answer 3

您可以使用动态导入-

const pdf = /* name received dynamically */
import(´${pdf}´);

详细了解动态导入-https://javascript.info/modules-dynamic-imports

如何在响应中动态呈现pdf？

3 个答案: