Example: Customize the name of download file

By default, the name of download file provided by the Get File plugin is determined by the name properties of OpenFile. It is the file URL that you pass to the Viewer component.

However, we can customize it by passing the fileNameGenerator option to the getFilePlugin function.

The option is a function accepts the current opened file and returns a string:

(file: OpenFile) => string;

For example, the sample code below adds a prefix of a-copy-of- to the original file name:

import { OpenFile } from '@react-pdf-viewer/core';

const getFilePluginInstance = getFilePlugin({
    fileNameGenerator: (file: OpenFile) => {
        // `file.name` is the URL of opened file
        const fileName = file.name.substring(file.name.lastIndexOf('/') + 1);
        return `a-copy-of-${fileName}`;

Click the Download button at the top to download the file (The sample code)

Related examples