标签: react-pdf

以下是一个react-pdf示例，并且https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png是 GCS 上公开托管的图像的链接。根据 GCS，“任何拥有此链接的人都可以访问公共互联网上的对象”

但是，如果我将链接复制到react-pdf示例中的第 11 行，则图像不会显示。根据其图像组件的文档，它清楚地表明：用于显示网络或本地（仅 Node）JPG 或 PNG 图像以及 base64 编码图像字符串的 React 组件。

简而言之，我在这方面运气不好，还是有其他方法可以在react-pdf中获取托管图像？也许另一个 JS 库更适合这个？我认为将此图像本地保存到我的应用程序中并不是一个好主意，因为我还有 1000 个以上的徽标，这会大大增加我的应用程序的大小。

Edit1：我使用这个 stackblitz （不是我的）快速尝试使用 jsPDF https://stackblitz.com/edit/react-w5qb9a?file=src%2FApp.js

我放弃了这个div

<div style={{ maxWidth: '40px' }}>
    <img
        style={{width: '100%' }}
        src='https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png' 
    />
</div>

...在p标签下，然后下载PDF，图像也没有出现。所以我仍在寻找解决方案。

到目前为止，使用react-pdf很简单，但我遗漏了一个我不知道如何找到的关键部分。我正在尝试获取加载时 PDF 文档的总页数。我需要它来创建页码导航。显然，数据存在于某处，因为将<Page>标签的pageNumber属性更改为硬编码值将显示正确的页面。但我不知道如何访问它。

我的代码如下。据我所知，我完全按照他们的指示去做。我关注的示例在这里： https: //www.npmjs.com/package/react-pdf

但这个numPages国家对我来说完全是个谜。我通过onDocumentLoadSuccess第 17 行的函数进行设置，如他们的 Github 文档示例中所示。{ numPages }但我不知道它应该从哪里得到争论。因为，按原样来说，numPages仍然是未定义的。因此，pageSelection（第 10 行）永远不会被填充。

也许我错过了一些东西，但据我所知，他们的文档没有解释这一点： https: //react-pdf.org/

有人可以帮我吗？

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

const PDFDisplay = (props) => {
    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

    const [ numPages, setNumPages ] = useState(null);
    const [ pageNumber, setPageNumber ] = useState(1);

    let pageSelection;

    if (numPages) {
        pageSelection = Array(1 - …

帮助我在创建react应用程序时安装react-pdf包（https://github.com/diegomura/react-pdf）。我无法更改 webpack.config。我按照用户 River Twilight 在这里找到的说明来执行此操作：How to update webpack config for a React Project Created using create-react-app?

根据安装react-pdf的说明

1. 我跑npm install process browserify-zlib stream-browserify util buffer assert
2. config-override.js在项目根文件夹中创建
3. 接下来，您需要将以下行插入到配置中：

const webpack = require("webpack");

module.exports = {
  /* ... */

  resolve: {
    fallback: {
      process: require.resolve("process/browser"),
      zlib: require.resolve("browserify-zlib"),
      stream: require.resolve("stream-browserify"),
      util: require.resolve("util"),
      buffer: require.resolve("buffer"),
      asset: require.resolve("assert"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ]

  /* ... */
}

但是 a) webstorm 发誓，b) 该项目不是由 …

我正在尝试使用 npm 库来帮助我呈现 pdf 文档。我找到了 react-pdf 但它还没有 TypeScript 的类型，所以我正在使用它，如下所示：

let Document = require('react-pdf');
let Page = require('react-pdf');

class PdfViewer extends React.Component<PdfViewer.Props, PdfViewer.State> {

  constructor(props: PdfViewer.Props) {
    super(props);
    this.state = {
      numPages: null,
      pageNumber: 1,
    };

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

  }

  componentWillReceiveProps(nextProps: PdfViewer.Props) {
    // this.setState(CsvViewer.parse(nextProps.data));
  }

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

      const buffer = data as ArrayBuffer;

      return ( 
      <div>
        <Document
          file={url}
          onLoadSuccess={this.onDocumentLoadSuccess}
        > …

我正在尝试使用react-pdf 渲染PDF。需要明确的是，我指的是这个React-pdf 库，而不是另一个库。我想在 PDF 中包含将来用于索引的某些文本，但我希望该文本不可见（或几乎不可见）。稍后我将使用从 PDF 中读取文本的 Python 脚本来检测此文本。

我的问题是如何通过隐藏标题的样式来实现这一点。

<Text style={styles.hiddenheader}>###HIDDEN HEADER###</Text>

const styles = StyleSheet.create({
  hiddenheader: {
    visibility: 'hidden',
    color: 'red',
  }
});

... 不起作用。文字仍然是红色的，所以我知道正在应用样式，但文字并没有隐藏，一目了然。

const styles = StyleSheet.create({
  hiddenheader: {
    display: 'none',
    color: 'red',
  }
});

...也不起作用。文本仍然是红色的，所以我知道正在应用该样式，但是除了一个之外的所有实例都被删除，并且那个实例奇怪地出现在第一页的最顶部，清晰如日。

我不需要从渲染页面中完全删除该元素的解决方案（这可能会阻止该元素出现）。我只需要一个能让肉眼看不到文字的东西。

我使用的是PDFDownloadLink从react-pdf包以在我的应用程序中即时生成 PDF，并允许用户根据传递给生成 PDF 文档的组件的数据下载报告。但是这个PDF有400多页需要渲染，这个操作阻塞了主线程几秒钟。有什么方法可以使此操作异步，以便在生成 PDF 时应用程序的其余部分将继续运行？此外，我希望能够缓存结果，因为传递给组件的数据可能来自大约 8 个不同的数据数组，这些数组变化不大，因此我宁愿不必在这些数组之间切换如果该给定数组的 PDF 之前已经生成过一次，则重新渲染 PDF...我'

import { Page, Text, View, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer'
const App = () => {
    const condition = "firstCondition";
    const filteredRowData = rowData.filter(a => a.condition = condition);
    return (
            <PDFDownloadLink
                document={<PDF_REPORT_Document rowData={filteredRowData} />}
                fileName={"PDF_REPORT.pdf"}
                style={{color:'white'}}
                >{({ blob, url, loading, error }) =>
                    loading ? "Report loading..." : "Report ready to download"
                }</PDFDownloadLink>
    );
}

const PDF_REPORT_Document = (props) => {
    const { rowData …

我尝试过使用cmps。但它仍然产生不可读的字符。

我使用create-react应用程序构建了一个react应用程序，该应用程序使用react-pdf显示pdf。当我输入引用磁盘上文件的文件名时，此方法工作正常，但在输入 url 时收到“无法加载 PDF”错误。我尝试了多个网址，但都失败了。在控制台中，我还收到以下警告，该警告来自一些谷歌搜索，似乎指的是 webpack 不兼容，尽管无论我尝试显示的文件类型如何，我都会收到它：

./node_modules/pdfjs-dist/build/pdf.js 关键依赖：require函数的使用方式无法静态提取依赖

我使用以下版本：react-pdf (4.1.10)、reacts-scripts (3.0.1) webpack (4.29.6)、react (16.12.0)。

我还按照建议在代码顶部进行了以下导入等操作：

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

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

似乎其他人也遇到过这个问题，但很难找到解决方案。我尝试显示的文件示例是： file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"

任何帮助表示赞赏！

我正在尝试在 react-pdf 中使用斜体样式。

一切正常，直到我使用font-style: italic;.

在 react-pdf 中是否有另一种方式将文本样式设置为斜体？

const Italic = styled.Text`
  font-size: 12px;
  lineheight: 20px;
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: 0.5px;
  font-style: italic;//problem is with this line
  font-weight:400;
`;

它给了我错误：

未捕获（承诺）错误：无法解析未定义的字体，fontWeight 400

我正在尝试使用react-pdf 库来显示base64 编码的PDF 文件。B64 数据是准确的，因为它加载在 iframe 中，如下所示：

 <iframe\n   className={css.previewIframe}\n   src={`data:application/pdf;base64,${\n     this.props.encodedPdf\n   }`}\n />\n

但是，如果我将数据插入到react-pdf文档中，我会收到错误：

<Document file={this.props.encodedPdf} />\n

文档呈现错误消息Failed to load PDF file.，并且控制台记录以下错误：InvalidPDFException\xc2\xa0{name: "InvalidPDFException", message: "Invalid PDF structure"}

我还收到很多警告，如下所示：Warning: Ignoring invalid character "109" in hex string

文档明确指出 file prop 可以是 B64 编码的内容。知道问题出在哪里吗？如果需要的话，这是 B64 数据：

JVBERi0xLjMKMSAwIG9iago8PAovS2lkcyBbIDMgMCBSIF0KL1R5cGUgL1BhZ2VzCi9Db3VudCAxCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9kdWNlciAoUHlQREYyKQo+PgplbmRvYmoKMyAwIG9iago8PAovQ29udGVudHMgNSAwIFIKL1JvdGF0ZSAwCi9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgPDwKL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0KPj4KL0Nyb3BCb3ggWyAwIDAgNjEyIDc5MiBdCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCAxMAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KSIkCCDAAAAAAAQplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA2CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDY4IDAwMDAwIG4gCjAwMDAwMDAxMDggMDAwMDAgbiAKMDAwMDAwMDI3MyAwMDAwMCBuIAowMDAwMDAwMzIyIDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNgovUm9vdCA0IDAgUgovSW5mbyAyIDAgUgo+PgpzdGFydHhyZWYKNDAzCiUlRU9GCg==\n

如果我添加data:application/pdf;base64,到字符串的开头，则不会出现错误，但也不会呈现任何内容。