Блог

Главная - Вопросы по программированию - загрузка PDF-файла с данными, полученными из api, в панели управления react-admin

загрузка PDF-файла с данными, полученными из api, в панели управления react-admin

#reactjs #api #react-redux #frontend #react-admin

#reactjs #API #react-redux #интерфейс #react-admin

Вопрос:

я создаю приложение на основе react-admin и поддельного сервера с использованием json-server

моя файловая структура следующая :

 client ( here goes the react app ) 
node_modules
db.json
package-lock.json
pachake.json
range.js

затем я создал списки продуктов и заказов и страницу показа:
ссылка на страницу показа заказа (например, order 3) :
http://localhost:3000/#/orders/3/show
и это показывает данные заказов
, что я хочу сделать, это загрузить PDF-файл, содержащий эту информацию, я попробовал следующий код в качестве отправной точки :

 import * as React from "react";

import {useQuery,  Show, SimpleShowLayout, TextField } from 'react-admin';
import { PDFDownloadLink, Document, Page , View , Text } from '@react-pdf/renderer'
 
const MyDoc = ({}) => {
   
    
return (
   
    <Document>
      <Page size="A4">
        <View>
           <Text>
         details must go here
           </Text> 
        </View>
      </Page>
    </Document>
   

  )};

const OrderShow = (props) => (
    <Show {...props}>
        <SimpleShowLayout>
  
        <TextField source='order_number' />
        <TextField source='reference_number' />
        <TextField source='status' />
        <TextField source='payment' />
        <TextField source='shipment' />
        <TextField  source='created_at' />
          <div>  
        
     
        <PDFDownloadLink document={<MyDoc />  } fileName="somename.pdf">
      {({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>

    </div>
        </SimpleShowLayout>

    </Show>
);
export default OrderShow

при этом я получил следующий результат :
введите описание изображения здесь

когда я нажимаю Загрузить сейчас! pdf-файл с содержимым «подробности должны быть здесь», но вместо этого мне нужны данные о текущем заказе

Ответ №1:

Попробуйте взглянуть на useShowController: https://marmelab.com/react-admin/Show.html#useshowcontroller

Используя это, я думаю, вы сможете получить доступ к данным из отображаемой в данный момент записи и создать оттуда PDF-файл.

Комментарии:

1. У меня не так много знаний в react-admin, поэтому он не работает даже сейчас. У вас есть пример или вы могли бы создать и использовать на основе предоставленного мной кода?

Ответ №2:

я сделал это таким образом, и это работает нормально :

 import React, {Component, PropTypes} from 'react';

// download html2canvas and jsPDF and save the files in app/ext, or somewhere else
// the built versions are directly consumable
// import {html2canvas, jsPDF} from 'app/ext';


export default class Export extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
      <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      <div id="divToPrint" className="mt4" {...css({
        backgroundColor: '#f5f5f5',
        width: '210mm',
        minHeight: '297mm',
        marginLeft: 'auto',
        marginRight: 'auto'
      })}>
        <div>Note: Here the dimensions of div are same as A4</div> 
        <div>You Can add any component here</div>
      </div>
    </div>);
  }
}
Метки: