Change file name

[PaBLyS]

After generating the PDF document, it opens in a browser named 768386f1-b29c-45cc-862b-9f1b1d0806d7. How can I change this name? I'm not uploading a file, I'm generating a file in PDFViewer

[diegomura]

Can you provide an example about how are you generating the file?

[PaBLyS]

Here is an example code: export default () => { return ( <PDFViewer> <Document> <Page size="A4" wrap={true}> <View> <Text> Example </Text> </View> </Page> </Document> </PDFViewer> ) } The full version is in the repository https://github.com/PaBLyS/pdf

[diegomura]

I think I looked at this way back and couldn't find a way to set the blob name on the browser. Will try to take a look at this again

[dance-dance-banana-frenzy]

import React from 'react'; // v17.0.2
import { pdf, Document, Page, View, Text } from '@react-pdf/renderer'; // v2.1.0
import { saveAs } from 'file-saver'; // v2.0.5
pdf(
  <Document>
    <Page>
      <View>
        <Text>Hewoe Werlds</Text>
      </View>
    </Page>
  </Document>
).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf'));

Edit: Add closing parentheses, import react, doc package versions.

[Floriferous]

Yeah, it'd be great if there was an API like <PDFViewer fileName="myPdf.pdf" /> to set the default name of the file in the browser.

[Lulu92270]

Hello all, I'm having the same issue here. Any update since last post?

<BlobProvider document={componentToRender()}>
  {({ url }) => (
    <a 
      href={url} 
      target="_blank" 
      rel="noopener noreferrer"
    >
      Confirm New Tab
    </a>
  )}
</BlobProvider>

[josangelATM]

Yeah, it'd be great if there was an API like <PDFViewer fileName="myPdf.pdf" /> to set the default name of the file in the browser.

Waiting for this implementation, such a Great idea.

[csulit]

Yeah, it'd be great if there was an API like <PDFViewer fileName="myPdf.pdf" /> to set the default name of the file in the browser.

This is the clean implementation.

[HZSamir]

I need this as well. Any way to implement this now on our end while we wait for an official fix?

[bgbbmm]

bump. also interested in this feature.

[andremalta-dev]

I need this one as well.

[jeetiss]

hey folks! As I read here https://stackoverflow.com/questions/53548182/can-i-set-the-filename-of-a-pdf-object-displayed-in-chrome

Ugly workaround with sending file through service worker is only one solution that works in chrome and I think that it's not valid for @react-pdf

I created codesandbox that works in ff, but not in chrome. if you have any suggestions, please share!

[mgoldenbe]

Any progress on this issue?

[mgoldenbe]

import { pdf, Document, Page, View, Text } from '@react-pdf/renderer';
import { saveAs } from 'file-saver';
pdf(
  <Document>
    <Page>
      <View>
        <Text>Hewoe Werlds</Text>
      </View>
    </Page>
  </Document>
).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf')

This solution is not working for me:

const MyDocument = ({course, order}) => (
  pdf(
  <Document>
    <Page size="A4" style={styles.page}>
      <Image style={styles.logo} src={logo} />
      <InvoiceTitle title='Invoice / Tax Receipt'/>
      <InvoiceNo order={order}/>
      <BillTo order={order}/>
      <InvoiceItemsTable course={course} order={order} />
      <InvoiceThankYouMsg />
    </Page>
  </Document>
  ).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf'))
);

I get Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

[adityatoshniwal]

Waiting for this.

[yrohit299]

Any progress on this. Will be great if anyone could help on this.

[agomez49]

+1 to this

Yeah, it'd be great if there was an API like <PDFViewer fileName="myPdf.pdf" /> to set the default name of the file in the browser.

[seanonthenet]

+1 for specifying file name please 🙏

[dance-dance-banana-frenzy]

import { pdf, Document, Page, View, Text } from '@react-pdf/renderer';
import { saveAs } from 'file-saver';
pdf(
  <Document>
    <Page>
      <View>
        <Text>Hewoe Werlds</Text>
      </View>
    </Page>
  </Document>
).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf')

This solution is not working for me:

const MyDocument = ({course, order}) => (
  pdf(
  <Document>
    <Page size="A4" style={styles.page}>
      <Image style={styles.logo} src={logo} />
      <InvoiceTitle title='Invoice / Tax Receipt'/>
      <InvoiceNo order={order}/>
      <BillTo order={order}/>
      <InvoiceItemsTable course={course} order={order} />
      <InvoiceThankYouMsg />
    </Page>
  </Document>
  ).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf'))
);

I get Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

It looks like you've got a bunch of custom objects there. I'd drill down into each one and verify that they all resolve to the objects from @react-pdf/renderer (View, Text, Link, Image, Canvas) or @react-pdf/styled-components.

Are you using code splitting with loadable components? This often involves promises as indicated in the error message that you reported. Make sure that the module is resolved as a component first before rendering it. Rather than using import Foo from './Foo';, you may need import('./Foo').then(Foo => { // now render with Foo... });. I've since switched to React.lazy - but it's the same workflow...

// Foo.jsx
import React from 'react';
import { Text } from '@react-pdf/renderer';
const Foo = () => (<Text>Hewoe Werlds</Text>);
export default Foo;

// LazyFoo.js
import { lazy } from 'react';
export default lazy(() => import('./Foo'));

// PDF.jsx
import React from 'react';
import { pdf, Document, Page, View } from '@react-pdf/renderer';
import { saveAs } from 'file-saver';

import('./LazyFoo').then(({ default: Foo }) => {
    pdf(
        <Document>
            <Page>
                <View>
                    <Foo />
                </View>
            </Page>
        </Document>
    ).toBlob().then(blob => saveAs(blob, 'MySuperAwesomeFileName.pdf'));
});

[Selenestica]

Any progress on this? Would be awesome for the file name to not be a string of random numbers and letters!

[vdebergue]

It seems like for firefox, it will try to get the filename from the url or from the pdf metadata:

https://github.com/mozilla/pdf.js/blob/26ae50e4494aa57b31f305df759fb44ae8be4cd7/web/app.js#L768-L772= https://github.com/mozilla/pdf.js/blob/26ae50e4494aa57b31f305df759fb44ae8be4cd7/src/display/display_utils.js#L354

So adding in the iframe url the data like <blob_url>#<options>,filename=<filename>.pdf seems to work for Firefox. A bit like the toolbar option: https://github.com/diegomura/react-pdf/blob/master/packages/renderer/src/dom/PDFViewer.js#L21-L23=

However it does not seem to work on Chrome (I haven't look at how Chrome handles its Pdf files)

[bryanprimus]

any update?

[AnoNate]

+1 Also need this

[jeetiss]

set title to Document component and chrome will display it instead of random data

[PrinceSP]

all the answers here is outdated. PDFViewer not support fileName anymore, instead the fileName moved to PDFDownloadLink, but the problem still not solve because still produce random string when we click download button from toolbar.

[PrinceSP]

set title to Document component and chrome will display it instead of random data

yes it will replace the random string, but still when we click the download button from toolbar, the file name automate generate with random string.

[jeetiss]

use this code https://codesandbox.io/s/polished-https-uvzew?file=/src/App.js to change the file name

[PrinceSP]

https://codesandbox.io/s/polished-https-uvzew?file=/src/App.js

Thanks for that. But, it only works on safari and firefox, but not in chrome

[jeetiss]

sorry, i test it again and yes, it doesn't work in chrome so title will be with the name but file is still random

[PrinceSP]

I add it already before using your solution, but still not working at all