使用react-pdf托管图像

Question

以下是一个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，图像也没有出现。所以我仍在寻找解决方案。

Answer 1

正如文档所说，我确认这在项目中有效，但正如您所指出的，由于某种原因，它在他们自己的示例网站上不起作用。

为了测试，我使用以下命令创建了一个新的反应项目create-react-app：

yarn create react-app react-pdf-image

安装react-pdf：

cd react-pdf-image
yarn add @react-pdf/renderer

注意：刚刚发布了新版本create-react-app（5.0.0），它使用 webpack v5，目前某些软件包react-pdf不再开箱即用。我必须通过craco包向 webpack 添加额外的配置。

安装附加包：

yarn add process browserify-zlib stream-browserify util buffer assert @craco/craco

更改scripts部分package.json如下：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

接下来在项目的根目录中创建一个craco.config.js包含以下内容的新文件：

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      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",
        }),
      ],
    },
  },
};

希望这个问题能够得到解决，如果是这样，我将删除这些额外的步骤。

src/App.js最后，用以下代码替换文件的内容：

import { Document, Image, Page, PDFViewer, Text } from "@react-pdf/renderer";

const MyDocument = () => {
  return (
    <Document>
      <Page>
        <Text>Image test</Text>
        <Image src="https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png" />
      </Page>
    </Document>
  );
};

const App = () => (
  <div>
    <PDFViewer>
      <MyDocument />
    </PDFViewer>
  </div>
);

export default App;

回到项目的根目录，运行yarn start，您应该会看到带有文本和图像的渲染 PDF。