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

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"  />

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.

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


Hi again,

I formated your post and now is visible you link.

¿You use phonegap?


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" />

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.

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


1 Like

You only need to add class=“external”

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


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!!


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?


If you use this class, work well.

You use canvas element?


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!!!

It’s under Initialize App in the docs for v1.6.5. Some stuff is carried over to v2.0
see “externalLinks”

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

Thank you!