File does not download on iPhone Chrome

[danielcranney]

I am using this with NextJS, and it will work fine on desktop, but on Chrome on my iPhone it will not download.
Instead, I get a 'document' without a title. When I try to open it, it's not an image.

My download function is:

onClick={async () => {
const { exportComponentAsJPEG } = await import(
 "react-component-export-image"
);
exportComponentAsJPEG(basicDefaultRef);
}}

[heysagnik]

Can make a video of the error as because I have no iPhone

[heysagnik]

See this !!
Can you download the image in iPhone ?

[danielcranney]

Thanks @devgossips , just gave it a go and get the same issue. It downloads a 'document' file.

[heysagnik]

Thanks can you share a video while downloading ???

[jeffceriello]

Hi, I'm also building a SSR app and the export-image tool works correctly on desktop but not on mobile, tested on an iPhone. @devgossips the link supplied does work correctly thought. Is it possible to see the repo? This is the code I have

<ToolButton className={`${!loaded ? `inactive` : ``}`} onClick={async () => {
                            const { exportComponentAsJPEG } = await import('react-component-export-image');
                            exportComponentAsJPEG(exportRef, {
                                fileName: "goal-5"
                              });
                        }}>

Thanks

[heysagnik]

see @jeffceriello @danielcranney this can do for ios

[danielcranney]

Thanks @devgossips, unfortunately I'm trying to allow users to download the image as a file, this article allows them to add to clipboard. Good find though!

[danielcranney]

Upload.from.GitHub.for.iOS.MOV

@devgossips heres a video showing the issue on your original link. It unfortunately doesn't download the file, just a document, on iOS. I have the same issue on my site.

[jeffceriello]

Hi, thanks for the reply. The issue I was having was that the file downloaded was indeed an image but it was blank. I've had to add html2canvasOptions for mobile only

exportComponentAsJPEG(exportRef, {
    fileName: "goal-5",
    html2CanvasOptions: isMobile ? { 
        foreignObjectRendering: true,
        scrollY: 0,
        x: 0,
        y: 0
    } : null
});