Reactjs，生成pdf文件，设置文件名答案

【问题标题】：Reactjs, generate pdf file, set name of fileReactjs，生成pdf文件，设置文件名
【发布时间】：2022-12-23 04:48:49
【问题描述】：

是否可以在"@react-pdf/renderer"中设置生成pdf文件的名称：“^2.3.0”？

当我在工具栏中单击下载时，它可能被保存为 uid 名称：现在它设置为例如“f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf”。文件生成正确。我想将文件名更改为例如“name.pdf”。

我使用“反应”：“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

【解决方案1】：

您可以使用 file-saver 包内的 saveAs 函数将 <Document /> 保存为具有自定义名称的 blob。看看saveFile函数。

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>
  );
}

【讨论】：

好的，谢谢，这是可能的解决方案。但在这个解决方案中，我想隐藏toolbar 中的下载按钮。我怎么能隐藏这个下载按钮？我可以使用设置showToolbar={false} 隐藏所有工具栏，但我想显示页面和按钮以供打印。
据我所知，这是不支持的。在这种情况下，您可能希望完全隐藏工具栏，并创建一个包含所需按钮的自定义工具栏。

【解决方案2】：

React-pdf 它的工作

<PDFViewer fileName="name.pdf" />

【讨论】：