How to create link with preventDefault and on click it must run download file from external url in React
return (
<Link to="/page">
<img src={src} />
<a href="https://external_photo_uri/pic.jpg" download />
</Link>
)
You can create a normal anchor tag with download attribute.
Example
<a href="myurl" download> <img src={src} /></a>
You can use react-download-link
A simple component to download data from a client-side cache (e.g. flux, redux). Design to be used with browserify or webpack.
Install with:
npm install --save react-download-link
Include with:
import DownloadLink from "react-download-link";
Use:
<DownloadLink
filename="myfile.txt"
exportFile={() => "My cached data"}
>
Save to disk
</DownloadLink>
Or with Promises:
<DownloadLink
filename="myfile.txt"
exportFile={() => Promise.resolve("My cached data")}>
Save to disk
</DownloadLink>
The component will default to an anchor tag, but the tagName prop will accept a string of any other HTML tag you prefer, such as 'button'.
I solved this problem. I create parent div on anchor tag and onClick run e.stopPropagation()
Please try with this one.
<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="/images/myw3schoolsimage.jpg" download>
<img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
</body>
</html>
Reference: https://www.w3schools.com/tags/att_download.asp
Related
<div class="edit-button">
<a href="http://localhost:3000/">
<button class="ed-button" type="button"><span class="edit-s"></span><i class="uil uil-edit-alt"></i> Edit</button>
</a>
</div>
I created a react app page that can configure the paint of a house model and i want to know how can i link that page into my html website without using npm start, all I could do is this which i can only link to localhost.
I'd like to use a button to download file stored in public folder. I have test.xlsx in public folder, and here is my code
<a href={"/test.xlsx"} download target='_blank'>
<button> click </button>
</a>
However, when I go to the website, it says Failed - No file. How can I fix it? Do I have to edit webpack.config.js?
Could you try this method, this should work. Using a file-saver hook.
import React from "react";
import { saveAs } from "file-saver";
export default function App() {
const saveFile = () => {
saveAs(
"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
"example.pdf"
);
};
return (
<div>
<button onClick={saveFile}>download</button>
</div>
);
}
Your code works 100% but you only need the download
<a href="/test.xlsx" download ><button> click </button></a>
I would suggest remove the target='_blank' as every browser can respond differently and may not trigger the download especially if it is counted as an attempt to redirect to a viral alternative like a popup advert etc.
What is wrong is checking the URL so if a browsers sees / it will attempt to open the download from its own root and logically I do not have your /test.xlsx in my c:\ folder. but it is in the working folder
However it is in the HTML working folder
so all I need to do is simply ensure I use the correct relative call to the valid files location e.g. this if its in the same folder
<body>
<a href="./test.xlsx" download ><button> click </button></a>
<body>
or simpler for current work folder if it is the public folder remove the path
<body>
<a href="test.xlsx" download ><button>Click to download test.xlsx</button></a>
<body>
In order to force react-router to treat links we should insert link as component: <Link to="/path"> rather then <a href="/path">.
What should I do in situation when html content arrives from server and inserted via (oh no...)
dangerouslySetInnerHTML?
render() {
return (
<div
dangerouslySetInnerHTML={{__html: store.posts[0].post_content}}
/>
);
}
What is the best way to force react-router to treat (internal) links in this html? Should I parse the html and convert it to components?
Instead of normal links
you could use a link that run a function like this:
<a OnClick={()=> history.push('route')}>go to</a>
sorry I haven't tested it :D
I'm very new to reactjs. There is a third-party library called react-bootstrap that I want to use in my project. I installed it via yarn and when I want to use it's components, nothing happens! For example:
import { Button } from 'react-bootstrap'
<Button variant="success">Sign In</Button>
has no effect on a button. In elements I can see that the class assigned:
<button type="button" class="btn btn-success">Sign In</button>
but there isn't any effect in button!! What should I do?
If you need any clarification, simply ask for it. Thank you!
You need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file after installing bootstrap using yarn / npm.
import 'bootstrap/dist/css/bootstrap.min.css';
Demo
so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.