I'm trying to create an HTML button that will open an image in the form of a base64 string in a new tab. I made a trial version that works fine with static images:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="static/static_filename.png" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Now I would like to do things dynamically (the application involves each user creating a new image, so serving from a single static filename will not work). My first attempt:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Where img_io is the base64 encoded image string.
Clicking the button does nothing, and prompts the message Not allowed to navigate top frame to data URL in the Chrome developer console. I tried adding download explicitly:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a download="filename.png" href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
This causes the image to download successfully on Chrome, but does not work on Firefox. Does anyone know how to make the base64 image string open in a new tab? Or as a fallback a create direct download option that works across browsers? Preferably in pure HTML, as this is part of a python based web app and I know next to nothing about Javascript.
Thanks
Related
So I have this web page,
Click to see image (This is a list of videos... the icon indicated by the arrow is the "a" tag)
and I want to click in the "a" tag to download the video (which is hosted on firebase)
I tried something like this...
<html>
<body>
<a href="https://firebasestorage.googleapis.com/v0/b/speech-to-text-web.appspot.com/o/dataset%2FAbuse%2Fabusar_x264_0.mp4?
alt=media&token=e84607c8-ba77-4c81-99a4-bd42d29cc869"
download>click</a>
</body>
</html>
However it just redirect me to the video in a new tab instead of asking where do I want to save the file.
Any suggest about how can I download the video just by clicking in the icon ("a" tag)?
Just move href value to download value.
<script>
let el = document.querySelectorAll("a");
el.forEach((v)=>{
let url = v.getAttribute("href");
v.href = "";
v.download = url;
});
</script>
Add this code on page, and click any a tags.
I have an Angular 4 website, which allows the users to download an image from an Amazon S3 bucket, to do this I use an anchor with the download attribute, but instead of downloading the image it gets opened in a new tab.
I tested it with Firefox, Chrome and Safari.
This is what I have in the template:
<a mat-raised-button color="accent" [href]="downloadPath" download matTooltip="Download file to pc." *ngIf="isFinalReport()">
<mat-icon>file_download</mat-icon>
DOWNLOAD
</a>
The download path is something like this: https://s3-sa-east-1.amazonaws.com/bucket-name/environment/imageName.jpg
I have also tested it with several images from around the web and doesnt work with any, but if I use a local image (C:/Users/User/Desktop/images/image.jpg) it works perfectly.
Any idea why this doesnt work and how to fix it?
If you need more information please let me know.
Thanks.
To directly download the image , you can try with
<a [href]="javascript:downloadImage(downloadLink);"></a>
downloadImage(downloadLink) {
this.mediaService.getImage(downloadLink).subscribe(
(res) => {
const a = document.createElement('a');
a.href = URL.createObjectURL(res);
a.download = title;
document.body.appendChild(a);
a.click();
});
}
}
Took some research, but I found that using the backend is the best approach to this problem. I was creating an anchor tag that upon clicking should download the s3 url, but instead it would open a new tab with the object. The problem is most likely caused by one or two things. One is that browsers do not allow for cross origin downloads directly. The second revolves around your Reponse Content Disposition. Here is my approach to getting s3 to download directly to the filesystem:
Backend (I use Django and boto3):
def get_file(self, obj):
client = boto3.client('s3', aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY)
return client.generate_presigned_url(
'get_object',
Params={
'Bucket': settings.AWS_STORAGE_BUCKET_NAME,
'Key': obj.key,
'ResponseContentDisposition': 'attachment',
},
ExpiresIn=600)
Frontend (using Angular):
<a [href]="what_i_returned_from_backend" [download]="answer.png" target="_self" rel="noopener noreferrer">Download</a>
I made a web app using Java (jersey servlets on backend) and AngularJs on frontend. I want to open in new tabs or download some local files. I tried using:
<a href="file:///{{course.path}}" target="_blank" ><span> {{course.filename}} </span></a>
where course is JSON like:
{type: "pdf", path: "C:/Users/Tom/Desktop/Courses/course2.pdf", areaSubject: "It", created: 1434700150341, filename: "course2"}
When I click on it, it opens a blank page (about:blank) and nothing appears.When I type on browser file:///C:/Users/Tom/Desktop/Courses/course2.pdf the content appears.
How can I make it works when click tag? I use Chrome.
I'd like to search for particular phrases within a WebBrowser dialog, and append a button after each, then on clicking that button, run a piece of VB.NET code.
E.G if it was searching for an </a> in this section of a web document
<p>Welcome to our website</p>
It would change that to
<p>Welcome to our website<input type="button" onlick="RUN_VB.NET_CODE_HERE"></p>
And that edited version of the webpage would be displayed to the user in the WebBrowser dialog.
Also, when you click the button that was appended, a piece of VB.NET code should execute.
To edit the HTML simply change the document:
Dim str As String = WebBrowser1.DocumentText
str = str.Replace(something, buttonCodeText)
WebBrowser1.DocumentText = str
WebBrowser1.Refresh()
And the simplest way I can imagine for the button to execute something in Vb.NET is to do an action which you monitor with your program to detect when to start the action. For example adding specific text to the webpage, changing some value with javascript you can read, or visiting some webpage just to detect it and start your VB.NET code.
i have a request if possible,
i have an interface which containts a table :
name of application url
XXXXXX www.xxx.com
Problem is when I click in the url I lose my information on my current page.
my question is there is a code language by Internet explorer FF chrome... provide this action
open in tab this url to put in the url like the method version and the other
like this about:version ==> open in new tab : this url to put in the url navigator
and we get a new tab
thank you for help .
i try open in a new tab by tools provided by IE , but if possible provide a solution like a code entered in url to open a new tab
If I get you, you want your link to open the page in another tab.
You may use the target attribute of the link like this :
<a href="somepage.html" target=newtab>text</a>
If you want something you can type in the URL field of the browser, that is a bookmarklet, you may use this :
javascript: window.open('http://www.dystroy.org');
In most browsers, ctrl-click a link do the same thing.
EDIT :
If what you can modify is only the href attribute of the link, you can make this href be like this :
<a href="javascript:window.open('http://www.dystroy.org');" target=_blank>text</a>
If its a hyperlink just add a "target" to the hyperlink with its value as "_blank". Working example:
<a id="termsLink" href="www.someLink.com" target=_blank>
Terms and Conditions</a>
The java script solution works great in case of shortcodes which offer you an href (or url) option but no target parameter. Here is an example with a popular callout shortcode:
[callout title='Your big Title' text='your small text...' button_text='CLICK ME' button link="**javascript:window.open**('http://www.dystroy.org');"]
Without the javascript, the linked page would open onto the current one.
You don't need any code to open a link in a new tab or window. HTML already has that functionality built in.
Use an tag to show your url and use the target attribute to tell it to open in a new window.
Example:
www.xxx.com
Learn more about a tag and target attribute here