Оставьте отзыв о загрузке в формате pdf - PullRequest
Новая
       9

Оставьте отзыв о загрузке в формате pdf

0 голосов
/ 23 апреля 2020

Я использую React-хуки и реактив-pdf из response-pdf

Я пробовал 3 разных конвертера React pdf, и это тот, который работал лучше всего до сих пор. Это все еще не работает, хотя я не могу понять, как заставить его не исчерпать память или создать пустые PDF-файлы.

У меня есть компонент, который производит PDF: 

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

Font.register({
    family: 'Roboto',
    src: 'https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap'
  });

// Create styles
const styles = StyleSheet.create({
  page: { 
    backgroundColor: '#F5F8FA',
    display: 'flex',
    // flexDirection: 'column',
    // alignItems: 'flex-start',
    marginTop: 40,
    marginLeft: 20,
    marginRight: 20,
    width: 555
  },
  section: {
    margin: 50,
    padding: 50,
  },
  reportHeader: {
    marginLeft: 0,
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: 24,
    lineHeight: 43,
    color: '#BF802F',
  },
  reportIntro: {
    width: 555,
    height: 132,
    paddingLeft: 0,
    paddingTop: 10,
    paddingBottom: 30,
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 16,
    lineHeight: 22,
    color: '#0C3957',
  }
});

// Create Document Component
export const ReportPDF = ({ name, adviser }) => {

    return (
  <Document > 
    <Page style={styles.page} wrap={false}>
      <View style={{ textAlign: 'flex-start', marginBottom: 20 }}>
        <Text style={styles.reportHeader}>Your goals report</Text>
      </View>
    </Page>
  </Document>
    )
}

И у меня есть еще один компонент, у которого есть кнопка для загрузки файла PDF. Я нашел кого-то еще, кто утверждал, что useMemo помогает в этой ситуации, но я не могу заставить его работать так же: 

const stuff = useMemo(
        () => (
          <PDFDownloadLink document={<ReportPDF />} fileName="somename.pdf">
            {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
          </PDFDownloadLink>
        ), [])

У меня тогда есть {stuff} внутри div в JSX.

Когда я нажимаю на ссылку для скачивания, я получаю пустой PDF. Что происходит?

Если я не установлю wrap = {false}, ему не хватит памяти?

...