Is it possible to set name of generate pdf file in "@react-pdf/renderer": "^2.3.0"?

When I click to download in toolbar, then it's save as probably with uid name: Now it set for example "f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf". File is generated correctly. I would like to change the name of file to for example "name.pdf".

I use "react": "17.0.2".

import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer 
    //src="/name.pdf" <- not working, error: Property 'src' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PDFViewer> & Readonly<PDFViewerProps> & Readonly<...>'.
    //fileName="/name.pdf" <- not working, error: Property 'fileName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PDFViewer> & Readonly<PDFViewerProps> & Readonly<...>'.
    showToolbar={true} 
    style={{ height: "45vh", width: "100%" }}
  >
    <MyDocument />
  </PDFViewer>
);

Is it possible to set name of generate pdf file in "@react-pdf/renderer": "^2.3.0"?

When I click to download in toolbar, then it's save as probably with uid name: Now it set for example "f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf". File is generated correctly. I would like to change the name of file to for example "name.pdf".

I use "react": "17.0.2".

import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer 
    //src="/name.pdf" <- not working, error: Property 'src' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PDFViewer> & Readonly<PDFViewerProps> & Readonly<...>'.
    //fileName="/name.pdf" <- not working, error: Property 'fileName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PDFViewer> & Readonly<PDFViewerProps> & Readonly<...>'.
    showToolbar={true} 
    style={{ height: "45vh", width: "100%" }}
  >
    <MyDocument />
  </PDFViewer>
);

• javascript
• reactjs
• typescript
• pdf
• react-pdf

2 Answers 2

You can use the saveAs function inside the file-saver package to save the <Document /> as a blob with a custom name. Have a look at the saveFile function.

import { PDFViewer } from "@react-pdf/renderer";
import {
  pdf,
  Document,
  Page,
  Text,
  View,
  StyleSheet
} from "@react-pdf/renderer";
import { saveAs } from "file-saver";

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

const MyDocument = () => (
  <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 function App() {
  const saveFile = () => {
    // This does the trick!
    pdf(<MyDocument />)
      .toBlob()
      .then((blob) => saveAs(blob, "YourFileName.pdf"));
  };

  return (
    <div>
      <PDFViewer>
        <MyDocument />
      </PDFViewer>

      <div>
        <button onClick={saveFile}>Save File</button>
      </div>
    </div>
  );
}

You can set the title to the document:

  <Document title="Random" style={styles.document}>
    <Page size="A4" style={styles.page}>
      <View style={styles.header}>
      </View>
    </Page>
  </Document>

And now you wont have random uuid