PDFDownloadLink work only work when render but hit error when reload page

See original GitHub issue

Hi, I am trying to use PDFDownloadLink to create download pdf link in my react project. It works after render but after reload the page, it hit error and I don’t know why.

I am using react with next js and typescript.

Error is :

PDFDownloadLink is a web specific API. Or you're either using this component on Node, or your bundler is not loading react-pdf from the appropiate web build.

This is main template .tsx

import React from 'react'
import { Row, Col, Carousel } from 'antd'
import { PDFDownloadLink, Document, Page } from '@react-pdf/renderer'

import MyDocument from '../components/tour-itinerary-pdf'

export default class extends React.PureComponent<{tour: TcResponse<Tour>, cart: Cart}> {

	render() {
		const Print = () => (
			<div>
				<PDFDownloadLink document={<MyDocument />} fileName="somename.pdf">
			  		{({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
				</PDFDownloadLink>
		      	</div>
		)

		return(
			<Row>
			  	<Col>
					{Print()}
				</Col>
			</Row>
		)
	}
}

This is component template

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


// Create styles
const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
});

// Create Document Component
class MyDocument extends React.Component{
    render(){
        return(
            <Document>
                <Page size="A4" style={styles.page}>
                    <View style={styles.section}>
                        <Text>Section #1</Text>
                    </View>
                    <View style={styles.section}>
                        <Text>Section #2</Text>
                    </View>
                </Page>
            </Document>
        )
    }
}

export default MyDocument;

Issue Analytics

State:
Created 4 years ago
Comments:13 (1 by maintainers)

Top GitHub Comments

58reactions

alexcaulfieldcommented, Nov 22, 2019

I’m not using Nextjs but instead of doing the dynamic import, I use hooks in my component to prevent the PDFDownloadLink from SSRing

const ResumeContainer = () => {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return (
    <>
      {isClient && (
        <PDFDownloadLink document={
          <PdfDocument 
            headerNodes={data.allGoogleSheetHeaderRow.edges}
          />
        } fileName="resume.pdf">
          {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download my resume')}
        </PDFDownloadLink> 
      )}
    </>
  );
}

11reactions

dephraiimcommented, Aug 25, 2021

React PDF now ships with a usePDF hook permanently. You can use it and it works fine in Next.js

import { usePDF, Document, Page } from '@react-pdf/renderer';

const MyDoc = (
  <Document>
    <Page>
      // My document data
    </Page>
  </Document>
);

const App = () => {
  const [instance, updateInstance] = usePDF({ document: MyDoc });

  if (instance.loading) return <div>Loading ...</div>;

  if (instance.error) return <div>Something went wrong: {error}</div>;

  return (
    <a href={instance.url} download="test.pdf">
      Download
    </a>
  );
}