标签: react-pdf

我正在尝试查看其中的 pdf 文件react pdf，但我无法执行此操作，因为它无法加载该文件。我不知道为什么，我尝试过这些 CDN：

• https://cdnjs.com/libraries/pdf.js/2.7.570

• https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js

其中一个不断加载，另一个不断给我一个错误。CORS 或fake worker failed错误。我需要帮助，提前致谢。

这是我的代码：

import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf_viewer.js.map";

const DocsViewer = ({ link }) => {
  const [pages, setPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    console.log("object:", numPages, pages);
    setPages(numPages);
    setPageNumber(1);
  }

  return (
    <div className="property-overview-container property-flex-half">
      <div className="description-overview">
        <Document
          file={
            "https://yahuda.s3.us-east-2.amazonaws.com/4d0970da-f0c7-4a37-9ce4-5c48619a996b.pdf"
          }
          // link={link}
          onLoadSuccess={onDocumentLoadSuccess}
          onLoadError={(error) => console.log("Inside Error", error)}
        >
          <Page pageNumber={pageNumber} style={{ display: …

我有一个nodeJs应用程序，我想使用库在后端创建pdf @react-pdf/renderer 。我的 pdf 包含图像和外部字体。有什么办法可以做到这一点吗？提前致谢..

我正在开发一个React JS项目。我有一个单独的本地 apache pdf 文件服务器。我正在从 url 访问任何 pdf 文件，例如：“ http://local_server_IPaddress/dirname/sample.pdf ”。我正在传递此 url 以在 React 组件中显示 pdf 文件，但出现以下错误。请告诉我如何解决这个问题。

参考- https://www.npmjs.com/package/react-pdf 代码

<Document
      file="http://local_server_IPaddress/dirname/sample.pdf"
      onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
 </Document>

浏览器控制台错误登录

从源“http ://localhost:3000”获取“http: //local_server_IPaddress/dirname/sample.pdf ”的访问已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头不存在请求的资源。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我创建了一个小型 React 应用程序来测试 React PDF。

单击下载链接后，它会按预期创建 pdf。我的问题是，我创建了一个由无序列表和三个列表项组成的显示组件，但它无法正确显示列表。

它按照我的预期从 App.js 渲染，但是当我打印 PDF 时，它会将列表混合成连续的行。

我尝试了不同的样式，放置组件和一堆其他方法都无济于事。

是否可以使用 React PDF 实现我想要的样式？

如果是这样，任何建议将非常受欢迎。

应用程序.js

import './App.css';
import { MyDocument } from './pdf';
import { PDFDownloadLink } from '@react-pdf/renderer';
import { Display } from './display';




function App() {
  return (
    <div className="App">
      {<PDFDownloadLink document={<MyDocument />} fileName="somename.pdf">
        {({ blob, url, loading, error }) =>
          loading ? 'Loading document...' : 'Download now!'
        }
      </PDFDownloadLink>}
      <Display />
    </div>
  );
}

export default App;

显示.js

export function Display() {
    return …

我正在使用react-pdf库来显示PDF文件。

但库没有加载该文件，即使它没有给出任何错误消息。

import React from "react";
import { Document, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

const Dashboard = (): React.ReactElement => {
  const [file, setFile] = React.useState("./invoice.pdf");
  function onFileChange(event: any) {
    console.log(event.target.files);
    setFile(event.target.files[0]);
  }
  function onDocumentLoadSuccess(params: any) {
    console.log("LOAD Success ", params);
  }
  return (
    <React.Fragment>
      <Box minHeight="500px">
        <Document
          file={file}
          onLoadSuccess={onDocumentLoadSuccess}
        ></Document>
      </Box>
      <input onChange={onFileChange} type="file" />
    </React.Fragment>
  );
};

export default Dashboard;

任何形式的帮助将不胜感激，谢谢！

我正在创建一个 React 应用程序，在其中我必须生成 pdf 并在单击按钮时保存该 pdf。如何将此 pdf 保存到本地目录中？

创建Pdf.js

import React, { Component } from 'react';
import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer';

class CreatePdf extends Component {
    constructor() {
        super();
        this.state = {
            styles: {} // all styles here
        }
    }

MyDocument = () => (
        <Document>
            <Page style={this.state.styles.body}>
                <Text style={this.state.styles.header} fixed>
                    ~ Created with react-pdf ~
                </Text>
            </Page>
        </Document>

    render() {
        return (
            <button onClick={(this.MyDocument, `${__dirname}/example.pdf`)}>Print PDF</button>
        )
    }
}
export default CreatePdf;

应用程序.js …