Vue.js/axiosでファイルのダウンロードをする。

CSVやPDFを想定。

ファイル名はレスポンスで指定されているものを利用。
日本語ファイル名を使う場合はURLエンコードが必要。

export default function useFileDownload(){

  const download = async (uri) => {
    await axios
      .get(uri, {
        responseType: "blob"
      })
      .then(({
               headers,
               data
             }) => {
        const contentDisposition = headers["content-disposition"];
        const fileName = getFileNameFromHeader(contentDisposition)

        const downloadUrl = window.URL.createObjectURL(new Blob([data]));
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.setAttribute("download", fileName); //any other extension
        document.body.appendChild(link);
        link.click();
        link.remove();
      });
  };

  const getFileNameFromHeader = (content,defaultName ='download.csv') => {
    const regex = content.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (regex === null) return defaultName;
    return decodeURI(regex[1]) || defaultName;
  };

  return {
    download
  }
}