Question

我想在Web应用程序中呈现PDF文件。并且还希望支持滚动，放大和缩小。所以我用了react-pdf-js，但是我找不到如何放大/缩小和滚动。我也尝试在响应中使用mozilla的pdf.js，但失败了。我需要一些有关如何渲染PDF文件的建议，以响应滚动，放大和缩小...感谢您的时间和帮助。

Answer 1

<ReactPDF
  file={{
    url: 'http://www.example.com/sample.pdf'
  }}
/>

使用ReactPDF包，它将变得简单而小型

Answer 2

只需使用<iframe/>插入您的pdf。它适用于大多数浏览器。

例如

<iframe src="your path"/>

大多数浏览器都有自己的嵌入式pdf渲染器，但是某些浏览器可能不支持它（例如IE），您可以在此处找到更多信息：HTML embedded PDF iframe

Answer 3

如果您使用react-pdf，则可以使用道具scale进行放大或缩小，它需要使用以.分隔的十进制值

它支持滚动，但是您可以使用max-height将文档包装在div中，然后添加overflow-y: auto来添加Y滚动条。

<DocumentWrapper>
  <Document file="file-url">
      <Page pageNumber={this.state.pageNumber} scale={this.state.scale}/>
  </Document>
</DocumentWrapper>

DocumentWrapper是样式化的组件

const DocumentWrapper = styled("div")({
  maxHeight: "600px",
  overflowY: "auto"
});

Answer 4

您可以使用 https://cloudpdf.io/。支持放大和缩小

import React, { useRef, useEffect } from "react";
import "./styles.css";
import CloudPdfViewer from "@openbook/cloudpdf-viewer";

export default function App() {
  const viewer = useRef(null);
  useEffect(() => {
    CloudPdfViewer(
      {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
      },
      viewer.current
    ).then((instance) => {});
  }, []);
  return (
    <div className="app">
      <div className="viewer" ref={viewer}></div>
    </div>
  );
}

如何在反应中渲染PDF？

4 个答案: