我设法生成了PDF文档并在页面上显示它,但我正在努力设置下载它的选项。
可以设置诸如单击此处下载文档之类的东西?
请参阅下面的代码:
import React, {Component} from 'react';
import { PDFViewer } from '@react-pdf/renderer';
import FeeAcceptance from '../Pdfgenerator/FeeAcceptance'
class AcceptFees extends Component {
render () {
return (
<>
<PDFViewer>
<FeeAcceptance member_detail={'test'} />
</PDFViewer >
<h1>click<a href="?????"> here </a>to download the document</h1>
</>
);
}
}
export default AcceptFees;
预先感谢您。
如果您遇到同样的问题,我发现了一些有帮助的东西。替换以下代码的PDFViewer:
<PDFDownloadLink document={<FeeAcceptance />} fileName="fee_acceptance.pdf">
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
https://reaeact-pdf.org/components
我们也可以使用ReactPDF.pdf
。这是异步函数的小型代码示例,该函数返回url
(如果需要的话,甚至blob
!(。我们可以使用此url
下载我们的PDF。
renderUrl = async() => new Promise((resolve, reject) => {
const blob = await ReactPDF.pdf(<FeeAcceptance member_detail={'test'} />).toBlob()
const url = URL.createObjectURL(blob)
if(url && url.length>0){
resolve(url)
}
}
).then(res => res).catch(err => console.log(err))
要下载生成的url
,我们可以使用a
标签的download
属性。这是一个示例
let sampleTab = window.open()
if(sampleTab) {
renderUrl().then(generatedUrl => {
if( generatedUrl ){
let aTag = document.createElement('a')
aTag.href = generatedUrl
aTag.style = "display: none";
aTag.download = 'FeeAcceptance.pdf'
document.body.appendChild(aTag)
aTag.click()
} // else -> means something went wrong during pdf generation
}).catch(err => console.log(err))
} // else -> means new tab can't be opened ... (some Adblock issue)