admin管理员组文章数量:1325708
Is it possible to set name of generate pdf file in "@react-pdf/renderer": "^2.3.0"?
When I click to download in toolbar, then it's save as probably with uid name: Now it set for example "f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf". File is generated correctly. I would like to change the name of file to for example "name.pdf".
I use "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>
);
Is it possible to set name of generate pdf file in "@react-pdf/renderer": "^2.3.0"?
When I click to download in toolbar, then it's save as probably with uid name: Now it set for example "f983dad0-eb2c-480b-b3e9-574d71ab162b.pdf". File is generated correctly. I would like to change the name of file to for example "name.pdf".
I use "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>
);
Share
Improve this question
asked Aug 24, 2022 at 11:14
EloElo
3061 gold badge9 silver badges25 bronze badges
0
2 Answers
Reset to default 3You can use the saveAs
function inside the file-saver package to save the <Document />
as a blob with a custom name. Have a look at the saveFile
function.
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>
);
}
You can set the title to the document:
<Document title="Random" style={styles.document}>
<Page size="A4" style={styles.page}>
<View style={styles.header}>
</View>
</Page>
</Document>
And now you wont have random uuid
本文标签: javascriptReactJSgenerate pdf fileset name of fileStack Overflow
版权声明:本文标题:javascript - Reactjs, generate pdf file, set name of file - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742196033a2431096.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论