PDF images only render in the browser
ReiterBaier opened this issue · comments
Before you start - checklist
- I followed instructions in documentation written for my React-PDF version
- I have checked if this bug is not already reported
- I have checked if an issue is not listed in Known issues
- If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo
Description
I am using react-pdf in my REACT project, where I render a list of products in PDF where each product has an image.
This works perfectly, but if I don't open the PDF in the browser, whether through Adobe Reader or WhatsApp or any other tool, the images are not rendered.
Steps to reproduce
I use PDFDownloadLink to call my PDF Page on ReportProducts
<PDFDownloadLink document={<ReportProducts data={rows}/>} fileName='Atacadão-Bike-Catalogo'
onClick={()=> setLoadingProgressPdf(false)}
>
{({loading}) => (loading ? <Button variant="contained" color="error">Gerando PDF...</Button> : <Button variant="contained" color="error">Pronto! Clique para baixar</Button> )}
</PDFDownloadLink>
export const ReportProducts: React.FC<ReportProductsProps> = ({ data }) => {
const backendApi = 'http://localhost:3000/images?url='
const imageBase64 = (url: string) => {
const imageService = new ImageService();
const imageBase64 = imageService.getImageByUrl(url);
return imageBase64
}
const batchSize = 10000;
const itemsPerRow = 4;
const rowsPerPage = 3;
const itemsPerPage = itemsPerRow * rowsPerPage;
const renderBatchPages = (startIdx: number, endIdx: number) => {
const pages = [];
for (let pageIndex = startIdx; pageIndex < endIdx; pageIndex++) {
const startIndex = pageIndex * itemsPerPage;
const endIndex = Math.min((pageIndex + 1) * itemsPerPage, data.length);
pages.push(
<View style={styles.container}>
<View style={styles.row}>
{data.slice(startIndex, endIndex).map((item, index) => (
<View style={styles.item} key={index}>
{/* <Image style={styles.image} src={backendApi+item.imageLink}/> */}
{/* <Image src={{ uri: backendApi+item.imageLink, method: "GET", headers: { "Content-type": "application/octet-stream" }, body: "" }} /> */}
<Image style={styles.image} src={imageBase64(item.imageLink)}/>
<Text style={styles.text}>{convertNumberToReal(item.price)}</Text>
<Text style={styles.skuText}>{'Código: ' + item.magentoSku}</Text>
<Text style={styles.descriptionText}>{item.description}</Text>
</View>
))}
</View>
</View>
);
}
return pages;
};
const renderAllPages = () => {
const totalBatches = Math.ceil(data.length / batchSize);
const pages = [];
for (let batchIndex = 0; batchIndex < totalBatches; batchIndex++) {
const startIdx = batchIndex * batchSize;
const endIdx = Math.min((batchIndex + 1) * batchSize, data.length);
pages.push(...renderBatchPages(startIdx, endIdx));
}
return pages;
};
return <Document><Page> {renderAllPages()}</Page> </Document>;
};
### Expected behavior
render the images on file
### Actual behavior
just render on browser after the pdf being generated
### Additional information
_No response_
### Environment
- **withour browser**:
- **3.3.8**:
- **18.2.0**:
I encounter the same issue. Are there any fixes/workarounds yet?
Maybe this will help someone:
For us, the error only occurs with .JPG image formats. After we have converted the images to .PNGs, the download and the display magically work without any problems. 🙂
(before that we got error code 110 in Acrobat/Acrobat Reader)
It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.