ReactJS - 将 PDF 文件列表导入 React 组件，然后将 pdf 转换为 png 并在 Image 组件中使用 之前之后/进球

问题描述

我目前正在开发一个 ReactJs 应用程序，该应用程序读取 Excel 电子表格，然后根据其中指示的信息生成 pdf。

我有一份我工作的公司提供的 PDF 列表。目标是在 A3 横向图纸上布置 6 个 PDF 文件。每个文件都是一个包含 DWG 绘图（由 Autocad 软件制作）的正方形。

首先，我想将“files”文件夹中的所有内容从“/src/files”导入到我的组件中。我试过没有成功：

之前

import React from 'react';
import { Page,Text,View,Document,StyleSheet,Image } from '@react-pdf/renderer';

import A from '../files/a.pdf'; ←
import C from '../files/b.pdf'; ←
import D from '../files/c.pdf'; ←
import E from '../files/d.pdf'; ←
import F from '../files/e.pdf'; ←
[...] ←

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row'
  },section: {
    margin: 0,padding: 0,flexGrow: 1
  },image: {
    margin:0,padding: 0
  },});

const PDF = () => {
  return (
    <Document
      title="Document PDF - 123 Structure"
      author="Auteur"
      subject="Document PDF - 123 Structure"
      creator="123 Structure"
      producer="123 Structure">
      <Page
        size="A3"
        orientation="landscape"
        style={styles.page}>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={A}/> ←
        </View>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={B}/> ←
        </View>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={C}/> ←
        </View>
      </Page>
    </Document>
  );
}

export default PDF;

之后/进球

查看箭头以查看实际代码和目标之间的差异

import React from 'react';
import { Page,Image } from '@react-pdf/renderer';
import * from './files'; ←

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row'
  },});

const PDF = () => {
  return (
    <Document
      title="Document PDF - 123 Structure"
      author="Auteur"
      subject="Document PDF - 123 Structure"
      creator="123 Structure"
      producer="123 Structure">
      <Page
        size="A3"
        orientation="landscape"
        style={styles.page}>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={files.a}/> ←
        </View>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={files.b}/> ←
        </View>
        <View style={styles.section}>
          <Image
          style={styles.image}
          src={files.c}/> ←
        </View>
      </Page>
    </Document>
  );
}

export default PDF;

作为第二步，我正在寻找一种将导入的 pdf 转换为 png 图像的解决方案，我可以在 npm 模块的图像组件的“源”或“源”参数中使用该图像：React-PDF。>

我想最终生成一个仅在创建 pdf 的过程中可用的临时 url。我在 ReactJS 和更一般的 JS 方面的初学者水平不允许我说这是否可行。这就是我联系你的原因。

提前感谢您的回答，您的帮助?。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）