Блог

Вот react-pdf пример и https://storage.googleapis.com/cbb_logos/conf_logos/conf-1-logo.png ссылка на изображение, которое публично размещено на GCS. Согласно GCS, «Любой, у кого есть эта ссылка, может получить доступ к объекту в общедоступном Интернете»

Однако, если я скопирую ссылку в строку 11 в react-pdf примере, изображение не отобразится. В документах для их компонента изображения четко указано: Компонент React для отображения сетевых или локальных (только для узла) изображений в формате JPG или PNG, а также строк изображений в кодировке base64.

Проще говоря, мне не повезло в этом, или есть другой способ получить размещенные изображения в react-pdf? Возможно, для этого лучше подойдет другая библиотека JS? Я не думаю, что это хорошая идея сохранять это изображение локально в моем приложении, так как у меня есть еще 1000 логотипов, и это значительно увеличило бы размер моих приложений.

Правка 1: я быстро попробовал использовать jsPDF, используя этот stackblitz (не мой)https://stackblitz.com/edit/react-w5qb9a?file=src/App.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, используя 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 , больше не работают из коробки. Мне пришлось добавить дополнительную конфигурацию в webpack через craco пакет.

Установите дополнительные пакеты:

 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-файл с текстом и изображением.

20.0622 Для тех, кто пытается это решить, в дополнение к комментарию 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(),
      ],
      
    },
    
  },
  
};
  

Теперь перезапустите ваше приложение, и оно должно начать работать.