ブラウザでリンクをクリック時にPDFを表示とダウンロードを同時にする

PDFファイルをタブで開くのとダウンロードするのと同時に実施したいという依頼があったので試してみます。

<a>要素タグに`downloadという属性を付与するとリンク先のドキュメントをダウンロードしてくれます。
MDN アンカー要素 download属性

同時にこの要素をクリック時にwindow.openで新たなウィンドウ（タブ）を開きます。
DOMで要素を取得してonclickで動く関数を設定します。
MDN Window.open()

この2つがどう相互に作用するか実際に試したところ、問題なく動きました。
以下がサンプルコードです。

HTML

<a href="document.pdf" download id="document-link">PDFはこちら</a>

JavaScript

document.getElementById('document-link').onclick = () => {
  window.open('random.pdf', '_blank')
}

Vue3でやるなら以下の形です。

Vue

<template>
  <a href="random.pdf" download @click="openPage()">PDFはこちら</a>
</template>

<script>
export default {
  methods: {
    openPage() {
      window.open('random.pdf', '_blank')
    }
  }
}
</script>

利用ケースはそんなになさそうですが、ユーザーに確実に保存して欲しい時とかは良いかもですね。