我正在创建一个React Web应用程序,其中必须创建一个在客户端创建pdf并下载pdf的下载按钮,我正在使用react-pdf / renderer库完成此任务,我已经成功实现了例如,我使用了该库的PDFDownloadLink组件,当我将该库直接呈现到ReactDOM.render时,它运行良好,但是当我尝试在JSX元素内使用相同的代码时,则无法运行..我要发布我的两个代码。
App.js
import React from 'react';
import {Document, Page,Text, StyleSheet, View} from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
function App() {
return (
<div>
<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>
</div>
);
}
export default App;
我已经尝试过了,并且效果很好。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import DownloadButton from './DownloadButton';
const PDF = () => (
<div>
<PDFDownloadLink document={<App />} fileName="somename.pdf">
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
</div>
)
ReactDOM.render(<PDF />, document.getElementById('root'));
serviceWorker.unregister();
我想实现这一目标,但遇到错误。
DownloadButton.js
import React from 'react';
import {Document, Page,Text, StyleSheet, View} from '@react-pdf/renderer';
import {PDFDownloadLink} from '@react-pdf/renderer';
import App from './App';
class DownloadButton extends React.Component {
constructor() {
super();
}
render(){
const GeneratePdf = () => (
<div>
<PDFDownloadLink document={<App />} fileName="somename.pdf">
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
</div>
)
return(
<div>
<h4>
{<GeneratePdf />}
</h4>
</div>
);
}
}
export default DownloadButton;
答案 0 :(得分:0)
如果不需要就地下载,请尝试使用 PDFViewer
而不是 PDFDownloadLink
并在新选项卡中打开它。然后将 iframe
的直接父级设置为全屏宽度和高度。用户可以使用浏览器pdf工具包下载文件。
类似于:
<PDFViewer>
<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>
</PDFViewer >
.iframe-parent {
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
}
您可以通过 props 或 router 或 httprequest 或其他方式传递任何数据。