jsでページを移動しつつ画像をダウンロードしたいです。

1.htmlにダウンロードボタンがあり、そこを押すと、2.htmlに移動してなおかつ、
sample.pngという画像をダウンロードしたいです。
（sample.pngの画像は表示はされずにダウンロードだけしている状態にしたいです。）

下記で対応できるような気がしているのですが、ローカル環境では2.htmlに移動はするものの
画像のダウンロードはされません。

どこか違うか分かりますでしょうか？

<a id="download" href="2.html" onclick="downloadImg();">ダウンロード</a>

<script>
function downloadImg () {
    const fileName = 'sample.png';
    vonst uri = 'sample.png';

    if (window.navigator.msSaveOrOpenBlob) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', uri);
        xhr.responseType = 'blob';
        xhr.onloadend = () => {
            if (xhr.status !== 200) {
                return false;
            }
            window.navigator.msSaveOrOpenBlob(xhr.response, fileName);
        };
        xhr.send();
    } else {
        let link = document.getElementById('download');
        link.href = uri;
        link.download = fileName;
    }
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

sample.pngの画像は表示はされずにダウンロードだけしている状態

ダウンロード時にダイアログを出すか、直接ダウンロードするかはブラウザの仕様なので
ユーザーが任意のコントロールはできません。

あとはdownloadようにhrefを設定してページ遷移用にカスタムデータでもつけておけばよいでしょう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('[data-href]').forEach(x=>{
4    x.addEventListener('click',()=>{
5      location.href=x.dataset['href'];
6    });
7  });
8});
9</script>
10<a data-href="2.html" href="sample.png" download="sample.png">ダウンロード</a>