Caching loaded documents for reuse

Before you start - checklist

• I have read documentation in README
• I have checked sample and test suites to see real life basic implementation
• I have checked if this question is not already asked

What are you trying to achieve? Please describe.

I have an application that can render multiple PDF documents. The user can select a document from the menu. Currently, whenever the user selects a document, the PDF file is always fetched anew from the server, even if it was already viewed prior. This puts a load on the network, as some documents can reach several MBs in size. I’m looking for a way to cache those PDF documents (incl. all pages) to avoid repeated requests (esp. on metered networks).

Describe solutions you’ve tried

I tried a naive approach to hook into onLoadSuccess and save the PdfDocumentProxy object into state

state = { pdfs: {} }

onDocumentLoadSuccess = pdf => {
  const selectedId = 'xyz'

  this.setState(({ pdfs }) => ({
    ...pdfs,
    [selectedId]: pdf
  }))
}

and then pass the saved object via file prop

render () {
  const { pdfs } = this.state
  const selectedUrl = 'https://example.com/example.pdf', selectedId = 'xyz'
  // If cached, use it, else fetch fresh from the API
  const pdf = pdfs[selectedId] ? pdfs[selectedId] : selectedUrl

  return <Document file={pdf} ... />
}

However, this doesn’t work as file prop doesn’t interpret PdfDocumentProxy objects. I also looked into other hooks such as onSourceSuccess, but it’s not clear how I could retrieve the contents of the PDF file with either one.

Question

Is there any recommendations for caching PDFs with react-pdf? I looked into this in pdfjs-dist but didn’t find anything conclusive. Any suggestions as far which store would be appropriate? I know of limitations of localStorage (5MB), IndexedDB (50MB/5MB), perhaps a POJO map could work? Or is this a silly idea altogether?

Environment

• react-pdf: 4.0.2
• react: 16.7.0
• node: 10
• Browser: IE11, Chrome, FF, Safari

[ghost]

@daweimau,

const [PDFBlob, setPDFBlob] = useState(null)

useEffect(() => {
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(res => res.blob())
      .then(file => setPDFBlob(file))
      .catch(e => { 
        if(e.name !== 'AbortError') { /* handle error*/ }
      });

    return () => controller.abort();
  }, [url, setPDFBlob]);
  
  return PDFBlob && <Document file={PDFBlob} ...

[mparisi76]

@wojtekmaj Is there an example of this anywhere? I’m trying to implement the file download myself, and I’m creating a new Blob, however, react-pdf doesn’t render anything. I’m not sure what I’m doing wrong…