3

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

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

简而言之，我对此不走运，还是有另一种方法可以在 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-tag下，然后下载了PDF，图像也没有出现。所以我仍在寻找解决方案。

4

2 回答 2

3

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

为了测试，我创建了一个新的反应项目，使用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。

于 2021-12-21T20:03:19.170 回答
0 

  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()} />

于 2021-12-20T06:11:57.570 回答