react-pdf-render展示文档时能否自定义文件名？

方案1：自定义下载按钮控制文件名 #

react-pdf的<PDFViewer>自带下载按钮会使用默认文件名，你可以隐藏它，自行实现下载逻辑来指定自定义文件名：

• 隐藏PDFViewer默认下载按钮：

<PDFViewer showDownloadButton={false}>
  <Document file={yourPdfSource} />
</PDFViewer>

• 自定义下载按钮，结合blob设置文件名：

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

// 生成PDF并下载的函数
const downloadCustomPDF = async () => {
  const blob = await pdf(<Document>{/* 你的PDF内容组件 */}</Document>).toBlob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = "自定义文件名.pdf"; // 此处设置目标文件名
  a.click();
  URL.revokeObjectURL(url);
};

// 渲染自定义下载按钮
<button onClick={downloadCustomPDF}>下载自定义命名PDF</button>

方案2：拦截PDFViewer默认下载事件（进阶） #

如果不想完全替换默认按钮，可以通过DOM操作拦截默认下载行为，修改文件名：

import { useEffect, useRef } from 'react';
import { PDFViewer, Document } from '@react-pdf/renderer';

const CustomPDFViewer = ({ fileName, ...props }) => {
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) return;
    // 定位PDFViewer内的下载按钮
    const downloadBtn = viewerRef.current.querySelector('button[title="Download"]');
    if (!downloadBtn) return;

    // 替换默认点击逻辑
    downloadBtn.onclick = async (e) => {
      e.preventDefault();
      // 生成PDF blob
      const blob = await pdf(<Document>{props.children}</Document>).toBlob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      a.click();
      URL.revokeObjectURL(url);
    };
  }, [fileName, props.children]);

  return <PDFViewer ref={viewerRef} {...props} />;
};

// 使用示例
<CustomPDFViewer fileName="我的自定义文件.pdf">
  <Document file={yourPdfSource} />
</CustomPDFViewer>

注意事项 #

• 上述代码基于@react-pdf/renderer v3.x版本编写，确保你的依赖版本匹配
• 若PDF从外部URL加载，需先获取文件内容转换为blob后，再设置自定义文件名

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