Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ivymasterman's avatar

How to download a ile in VueJS

Hello, I am trying to download a file from my server, that is retrieved via sharePointAPI.

So, the front app makes a request to the server, and the server requests the file from SharePoint.

If I call the server directly, from the browser, the file downloads correctly. The server code is:

public function downloadFile($path = null, $fileName = null)
    {
        $response =
            Http::withHeaders([
                "Accept" => "application/json;odata=verbose",
                "Authorization" => "Bearer " . $this->getAccessToken(),
            ])->get($url);
        $responseData = $response->body();

        if ($response->getStatusCode() != 200) null;

        return $responseData;
    }

The problem is when I call it from the Frontend app. Frontend code is:

downloadFile({ commit, state }, payload): any {
    const axiosClientNew = axios.create({
      baseURL: `http://localhost:8080/api`,
      headers: {
        responseType: "blob",
      },
    });
    axiosClientNew.interceptors.request.use((config: any) => {
      config.headers.Authorization = `Bearer ${store.state.user?.token}`;
      return config;
    });
    return axiosClientNew
      .get("/share-point/download-file", {
        params: {
          path: payload.path,
          name: payload.name,
        },
      })
      .then((response) => {
        const fileURL = window.URL.createObjectURL(new Blob([response.data]));
        const fileLink = document.createElement("a");

        fileLink.href = fileURL;
        fileLink.setAttribute("download", payload.name);
        document.body.appendChild(fileLink);

        fileLink.click();

        return response;
      });
  },

When I log the response, I receive this:

"PK\u0003\u0004\u0014\u0000\u0006\u0000\b\u0000\u0000\u0000!\u0000vO�ߘ\u0001\u0000\u0000)\u0007\u0000\u0000\u0013\u0000�\u0001[Content_Types].xml ��\u0001(�\......

I have never done this, any help is greatly appreciated.

0 likes
2 replies
ivymasterman's avatar

In the end, I just do a redirection to the backend URL, in a new tab.

Please or to participate in this conversation.