[SOLVED] Download an image does not work when using framework7

Questions
1

I am trying download an image using it inside an anchor this way:

<a href="images/photo.png" download="photo" id="downloadImage">
    <img src="images/photo.png"  />
</a>

But when I user framework7 it stops working

I am using a framework that initializes framework7 this way:

// Initialize your app
var myApp = new Framework7({
    animateNavBackIcon: true,
    // Enable templates auto precompilation
    precompileTemplates: true,
    // Enabled pages rendering using Template7
	swipeBackPage: true,
	pushState: true,
    template7Pages: true
});

// Export selectors engine
var $$ = Dom7;

Could anyone help me with this issue?

It just not works, but if I comment the code above, the download of the image works fine.

2

Hi @Eduardo_Cruz

I dont know your problem, how try you an download image?

You use plugins, link?

PD: Next time post your code with code tag

Thanks

3

Hi again,

I formated your post and now is visible you link.

ÂżYou use phonegap?

Regards

4

Hi, Daniel.
I’m talking from Brazil.

I just want to click in an Image that is already on the page and start a download of it.
The html code bellow does that, I do not need nothing else:

<a href="images/photo.png" download="photo" id="downloadImage"> <img src="images/photo.png" />
</a>

If I do not inicialize the framework7, it works fine, and the image can be save.

But after initialize framework7, nothing happens when I click the image.

I have no clue from navigator debug.

5

Hey @Eduardo_Cruz

Use this

<a href="images/photo.png" class="external" download="photo" id="downloadImage"> <img src="images/photo.png" /></a>

With “external” class

And in your JS

$$(document).on("click", ".external", function(){
      var url = $$(this).attr("href");
      window.open(url, "_system");
});

Tell me if your question is resolved

Regards

1 Like
6

You only need to add class=“external”

<a href="img/photo.jpg" class="external" download="my_photo">

2 Likes
7

DanielRiera and coollwj, Thank you both!!!

Just adding external class to the anchor works pretty well!!!

Where did you find this info? Is there others hidden classes out there? :wink:
I looked everywhere in docs and I did not find it!!!

This help save the day!!!

Thank you!!

Regards!

8

I again.

It is working fine but I have now another issue:

If it is used with an static and existing image, that is OK and works fine.

But I also need that for a just created image from canvas…

I also tried the above code, just after created the image, but I had no success at all.

Any tips?

9

Hi

If you use this class, work well.

You use canvas element?

10

Hi,

It is working now :slight_smile:

I just realize I forgot changing the href from the

I changed it “on the fly” by the image generated by mycanvas[0].toDataURL(“image/png”) and it worked fine.

Thank you very much!!!

11

It’s under Initialize App in the docs for v1.6.5. Some stuff is carried over to v2.0
https://framework7.io/docs/init-app.html
see “externalLinks”

12

It was very useful. There is a lot of informations there.

Thank you!