Anchor tag Href generated by onClick event...
Answered
American Wirehair posted this in #help-forum
American WirehairOP
Hey all,
Im stumped on an issue with a site im building. I have an onClick that triggers a function to download a pdf via a signed url from Supabase. It works but theres one problem, my href is generated by the onClick and i setState the signed url. So the first click on the anchor tag generates the href and the second click opens a new tab to display the pdf. The state is set by the onClick function of course. Obviously i just want to click the anchor tag once and have it work. Being that its a signed url i cant use Link to my knowledge.
The only solutions ive come up with make the api calls in advance of the <a> but that seems crazy due to the potential that the client may not want to download their file every time they hit that page. Is there a way to make a users single click a double without them having to do it? Or some way to double fire? Open to any ideas.
Im stumped on an issue with a site im building. I have an onClick that triggers a function to download a pdf via a signed url from Supabase. It works but theres one problem, my href is generated by the onClick and i setState the signed url. So the first click on the anchor tag generates the href and the second click opens a new tab to display the pdf. The state is set by the onClick function of course. Obviously i just want to click the anchor tag once and have it work. Being that its a signed url i cant use Link to my knowledge.
The only solutions ive come up with make the api calls in advance of the <a> but that seems crazy due to the potential that the client may not want to download their file every time they hit that page. Is there a way to make a users single click a double without them having to do it? Or some way to double fire? Open to any ideas.
Answered by joulev
;<button
...
onClick={async () => {
const pdfUrl = await generatePdfUrl();
window.open(pdfUrl, '_blank');
}}
>
Open in new tab
</button>2 Replies
@American Wirehair Hey all,
Im stumped on an issue with a site im building. I have an onClick that triggers a function to download a pdf via a signed url from Supabase. It works but theres one problem, my href is generated by the onClick and i setState the signed url. So the first click on the anchor tag generates the href and the second click opens a new tab to display the pdf. The state is set by the onClick function of course. Obviously i just want to click the anchor tag once and have it work. Being that its a signed url i cant use Link to my knowledge.
The only solutions ive come up with make the api calls in advance of the <a> but that seems crazy due to the potential that the client may not want to download their file every time they hit that page. Is there a way to make a users single click a double without them having to do it? Or some way to double fire? Open to any ideas.
;<button
...
onClick={async () => {
const pdfUrl = await generatePdfUrl();
window.open(pdfUrl, '_blank');
}}
>
Open in new tab
</button>Answer
American WirehairOP
Works killer! Thanks so much!