标签: react-pdf

我设法生成了 pdf 文档并将其显示在页面上，但我正在努力设置下载它的选项。

是否可以设置类似单击此处下载文档的内容？

请参考以下代码：

import React, {Component} from 'react';
import { PDFViewer } from '@react-pdf/renderer';
import FeeAcceptance from '../Pdfgenerator/FeeAcceptance'

class AcceptFees extends Component {

  render () {
      return (
          <>
              <PDFViewer>
                  <FeeAcceptance member_detail={'test'} />
              </PDFViewer >

              <h1>click<a href="?????"> here </a>to download the document</h1>
          </>
      );
  }
}

export default AcceptFees;

先感谢您。

由于react-pdf库提供了一些有限的组件，并且不允许在reactpdfrenderer中呈现html标签，所以我很难使用该库制作表格吗？谁能帮助我，如何使用此react-pdf库组件创建表？

我正在使用 React hooks 和 react-pdf 中的react-pdf

我尝试了 3 种不同的 React pdf 转换器，这是迄今为止效果最好的一种。它仍然不能很好地工作 - 我不知道如何使它不耗尽内存或生成空白的 pdf。

我有一个生成 pdf 的组件：

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

Font.register({
    family: 'Roboto',
    src: 'https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap'
  });

// Create styles
const styles = StyleSheet.create({
  page: { 
    backgroundColor: '#F5F8FA',
    display: 'flex',
    // flexDirection: 'column',
    // alignItems: 'flex-start',
    marginTop: 40,
    marginLeft: 20,
    marginRight: 20,
    width: 555
  },
  section: {
    margin: 50,
    padding: 50,
  },
  reportHeader: {
    marginLeft: 0,
    fontStyle: …

我有一个要求，我必须在画布中打开现有的 pdf 并在 pdf 中绘制可调整大小和可拖动的矩形并获取绘制的这些矩形的坐标。这是我显示pdf的代码。

    import React, { PureComponent } from "react";
    import { Document, Page, pdfjs } from "react-pdf/dist/entry.webpack";
    import PdfComponents from "../../../Components/PdfComponents/PdfComponent";
    import "./PDFdemo.css";
    import requiredFile from "./test_form.pdf";
    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${
    pdfjs.version
    }/pdf.worker.js`;
    export default class PdfViewer extends PureComponent {
    state = {
        numPages: null,
        pageNumber: 1,
        rotate: 0,
        scale: 1
    };
    onDocumentLoadSuccess = ({ numPages }) => {
        console.log('this function was triggered')
        this.setState({ numPages });
    };
    render() {
        const { pageNumber, scale, pdf } = this.state;
        console.log("pdf", …

我正在尝试使用react-pdf呈现 pdf我面临的问题是我正在使用 URL 显示来自后端服务器的图像。但它在pdf中显示为空白。当我进一步调试时才知道，当我在突出显示的行上放置断点时，图像就会显示出来。从远程 URL 加载图像可能没有时间？

        <Page size="A4" style={styles.page}>
                            {this.state.productsToBeExported.map((product) => {
                                const img = this.getImageSource(product); 
                              //if breakpoint is added here then the images are displayed
                                return (
                                    <View
                                        key={product.productId}
                                        style={styles.section}
                                    >
                                        <Image
                                            style={{
                                                width: imgWidth + "px",
                                                border: "2pt solid #999898",
                                            }}
                                            src={img}
                                        ></Image>
        </View>)
    });
    </Page>


//remote Image Url (Node server)
getImageSource(product) {
     return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;           
}
            

PDF输出

任何帮助将非常感激。

注意：这些图像是在后端即时生成的。所以我不能导入它们。

由于我无法在将要使用该应用程序的网络中使用浏览器的 pdf 查看器，因此我正在测试用于使用 React 加载 PDF 的react-pdf包。我制作了一个组件，用于发送从后端获取的 PDF 网址：

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

const PDFViewer = ({url}) => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
 function onLoadError(error) {
   console.log(error);
 }

 function onSourceError(error) {
   console.log(error);
 }

  return (
    <div>
      <Document
        file={window.location.origin + url}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onLoadError}
        onSourceError={onSourceError}
      >
        {[...Array(numPages).keys()].map((p) => (
          <Page pageNumber={p + 1} />
        ))}
      </Document>
    </div> …

我创建了一个具有某些功能的表，每一行都可以生成一个 pdf 并通过使用 render-pdf npm 进行下载，我想在用户单击新页面上的下载按钮 pdf 预览时显示，它可以工作，但是在他们在页面加载时将所有数据行数据作为道具传递的方法有时会影响页面，并且页面崩溃了我尝试单击一次在道具中发送特定数据它无法正常工作，请帮助任何想法对我来说非常完整。

感谢帮助

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';
import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer';

const data = [
  {
    id: 5,
    name: 'test',
    email: 'test@gmail.com'
  }
];

const MyDoc …

我正在尝试使用我的自定义字体使用 @react-pdf/renderer 创建 pdf 文件。

这是我的代码：

const styles = StyleSheet.create({
  page: {
    alignItems: "center",
  },
  text: {
    fontFamily: "Nunito",
  },
});

const MainPage = () => {
  Font.register({
    family: "Nunito",
    src: "./ttf/Nunito-Regular.ttf",
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <Text style={styles.text}>Reserve Number: </Text>
      </Page>
    </Document>
  );
};

我收到此错误：

index.js:1 Error: Unknown font format
    at Object.push../node_modules/@react-pdf/fontkit/lib/fontkit.browser.es.js.fontkit.create (fontkit.browser.es.js:49)
    at FontSource._callee2$ (font.js:73)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:294)
    at Generator.next (runtime.js:119)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

我尝试了各种解决字体的方法，但没有任何效果。

任何帮助或将不胜感激。谢谢。

我从基本 UI 集成了文件上传器，并尝试使用 React-pdf 包显示上传的文件。我尝试将文件转换为 Blob，然后使用以下代码上传它

const test = new Blob([file], { type: "application/pdf" });
    const fileURL = URL.createObjectURL(test);

相反，我尝试直接将上传的文件分配给 Document 标签，但获取该 file 属性是接受字符串而不是接收文件类型。

我也尝试使用文件阅读器，但无法实现

以下是我的代码沙箱链接：- https://codesandbox.io/s/base-web-file-uploader-basic-usage-forked-z8zpkr?file=/src/example.js:1712-1820

谁能帮我解决这个问题

我注意到的另一件事是 onLoadError 属性中出现以下错误

Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler'

我正在尝试使用这个react-pdf-viewer来实现pdf查看器。

但是，它不断抛出此错误：

/node_modules/pdfjs-dist/build/pdf.js：意外字符“#”(1413:9)

1411 | 1411 1412 | 1412 类 PDFDocumentLoadingTask {

1413 | 1413 静态#docId = 0; | ^

这是我添加的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@react-pdf-viewer/core";

import "@react-pdf-viewer/core/lib/styles/index.css";

const ModalExample = ({ fileUrl }) => {
  const [shown, setShown] = useState(false);

  const modalBody = () => (
    <div
      style={{
        backgroundColor: "#fff",
        flexDirection: "column",
        overflow: "hidden",

        /* Fixed position */
        left: 0,
        position: "fixed",
        top: 0,

        /* …