React 17.0.2中如何为@react-pdf/renderer v2.3.0设置PDF导出文件名？

你遇到的是@react-pdf/renderer的PDFViewer组件默认下载文件名是随机UID的问题，该组件本身并没有暴露src或fileName这类直接设置文件名的属性，所以直接添加会报错。下面提供两种可行的解决方案：

方案一：自定义下载按钮（推荐，稳定可控） #

通过usePDF钩子获取PDF的Blob数据，手动触发下载并指定文件名，同时可以隐藏默认工具栏避免冲突：

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

// 你的PDF文档组件
const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <View style={styles.section}>
        <Text>自定义文件名示例</Text>
      </View>
    </Page>
  </Document>
);

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

const App = () => {
  // 使用usePDF钩子获取PDF数据
  const { pdf, loading } = usePDF({ document: <MyDocument /> });

  const handleDownload = () => {
    if (!pdf) return;
    // 创建Blob对象
    const blob = new Blob([pdf], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    // 创建a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'name.pdf'; // 设置自定义文件名
    downloadLink.click();
    // 释放URL对象
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <PDFViewer 
        showToolbar={false} // 隐藏默认工具栏
        style={{ height: "45vh", width: "100%" }}
      >
        <MyDocument />
      </PDFViewer>
      {/* 自定义下载按钮 */}
      <button onClick={handleDownload} disabled={loading}>
        {loading ? '生成PDF中...' : '下载PDF'}
      </button>
    </div>
  );
};

export default App;

方案二：修改默认工具栏的下载逻辑（依赖内部API，需注意版本兼容） #

如果需要保留默认工具栏，可以通过ref访问PDFViewer的内部实例，覆盖默认的下载方法：

import { useRef, useEffect } from 'react';
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from './MyDocument'; // 导入你的PDF文档组件

const App = () => {
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) return;
    
    // 获取PDFViewer内部的viewer实例
    const internalViewer = viewerRef.current.viewer;
    // 覆盖默认的download方法
    internalViewer.download = () => {
      internalViewer.getDocument().then(doc => {
        doc.getBlob().then(blob => {
          const url = URL.createObjectURL(blob);
          const downloadLink = document.createElement('a');
          downloadLink.href = url;
          downloadLink.download = 'name.pdf'; // 设置自定义文件名
          downloadLink.click();
          URL.revokeObjectURL(url);
        });
      });
    };
  }, []);

  return (
    <PDFViewer 
      ref={viewerRef}
      showToolbar={true}
      style={{ height: "45vh", width: "100%" }}
    >
      <MyDocument />
    </PDFViewer>
  );
};

export default App;

注意事项 #

• 方案一使用官方提供的usePDF钩子，属于稳定API，不会因组件版本更新而失效，推荐优先使用。
• 方案二依赖组件内部未暴露的API，后续版本更新可能导致代码失效，需要注意版本兼容性。

内容的提问来源于stack exchange，提问作者Elo