使用react-pdf托管图片

Question

这里 是一个关于react-pdf的示例，https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png是Google Cloud Storage上存储的公共图像链接。根据GCS的说法：“任何使用此链接的人都可以在公共互联网上访问对象”。

然而，如果我将该链接复制到第11行的react-pdf示例中，图像将无法显示。根据文档中的图片组件说明，它明确指出：用于显示网络或本地（仅限Node.js）JPG或PNG图像的React组件，以及base64编码的图像字符串。

简单来说，我的情况是否无解？还是有其他方法可以在react-pdf中获得托管的图像？也许另一个JS库对此更好？我认为将此图像保存到我的应用程序中不是一个好主意，因为我还有1000多个标志，这会使我的应用程序大小大大增加。

Edit1：我尝试了一下jsPDF，并使用了此stackblitz（非我的内容）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>

我在网站上尝试了一个HTML页面，其中包含图像。但是当我将该HTML页面转换为PDF文件后，图像也没有出现。因此，我仍在寻找解决方案。

- Canovice

Answer 1

按照文档所说，我已经证实了这项技术在项目中可行，但是正如你所指出的，在他们自己的示例网站上却无法正常工作。

为了进行测试，我使用create-react-app创建了一个新的React项目：

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

请按以下方式更改package.json中的scripts部分：

  "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。

- liquidki

Answer 2

2022年6月，对于那些试图解决这个问题的人，除了liquidki的评论之外，我还需要做以下几点：

1：按照liquidki的评论中的每一步操作。

2：添加以下库：

yarn add browserify-fs node-polyfill-webpack-plugin process

3：在您的craco.config.js文件中添加：

const webpack = require("webpack");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

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"),
          fs: require.resolve('browserify-fs'),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser.js",
        }),
        new NodePolyfillPlugin(),
      ],
      
    },
    
  },
  
};

现在重新启动您的应用程序，它应该可以正常工作。

- William Philppe

Answer 3

  function returnSrc() {
    const path =  "https://lh3.googleusercontent.com/a-/AOh14GhNkZlYA7Qu9ZHeXoxsJczf3OPuyyNzLi_hFbgEKnU=s96-c";
    console.log("LOG", path);
    let selectedMethod = "GET";
    return { uri: path, method: selectedMethod, body: "", headers: "" };
  }

<Image style={styles.profile} src={returnSrc()} />

- THANUSH

---

虽然这确实在示例网站上显示了图像，但是当我将上面的path替换为问题中的png文件时，它只显示白色空间。 - liquidki