typescript Reactjs，生成pdf文件，设置文件名

jm81lzqq 于 2022-12-24 发布在 TypeScript

关注(0)|答案(2)|浏览(297)

是否可以在"@react-pdf/renderer"中设置生成pdf文件的名称：“^2.3.0”？
当我点击工具栏中的下载，然后它保存为可能与uid名称：现在它设置为“f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf”。文件正确生成。我想将文件名更改为“name.pdf”。
我用“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>
);

typescript

来源：https://stackoverflow.com/questions/73472133/reactjs-generate-pdf-file-set-name-of-file

2条答案

按热度按时间

qkf9rpyu1#

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

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

赞(0）回复(0）举报 2022-12-24

vhmi4jdf2#

它在工作