如何使用 axios 下载文件时收到错误

Question

我的代码：

休息客户：

return axios.get(url, {
    responseType: 'arraybuffer'
});

处理回复：

  const link = document.createElement('a');
            link.href = window.URL.createObjectURL(new Blob([response.data]));
            link.target = "_blank"; 
            link.click();

如果服务器端没有错误，则运行良好。 但是，当服务器 API 出现错误时，我不会得到任何详细信息，因为响应类型为

arraybuffer

。

    .catch((error) => {
        dispatch(showError("An Error Occured", error)); //error does not contain the expected details
    });

我尝试不设置 arraybuffer 类型，而是使用 TextDecoder，但是结果 pdf 似乎已损坏（空显示）。

如何修改现有设置以便能够在发生错误时接收详细信息？

编辑：解决方案： 好的，我明白了，我可以从 error.data 中解码出错误信息：

var data:any = JSON.parse(new TextDecoder().decode(error.data));

然后使用错误代码和消息。

Answer 1

我知道这是一个老问题，但在寻找使用 laravel-snappy 包从基于 Laravel 的 api 端点在 Vue 中下载 pdf 文件的解决方案时发现了它。也许它会对某人有所帮助：

这是我在 api ednpoint 中的代码，用于下载具有特定名称的文件：

$pdf = App::make('snappy.pdf.wrapper');
    $data = Blade::render($template->content, compact('contract'));
    $pdf->loadHTML($data)
        ->setOption('encoding', 'utf-8')
        ->setOption('margin-top', 20)
        ->setOption('margin-right', 20)
        ->setOption('margin-bottom', 20)
        ->setOption('margin-left', 20);
    return $pdf->download('document_' . sha1(time()) . '.pdf');

如果出现问题，请返回一些消息：

return response()->json([
                'message' => 'Can't generate contract......'
            ], Response::HTTP_BAD_REQUEST);

一切似乎都很好，但问题是在 axios 中获取文件名和 400 错误，因为 responseType: 'arraybuffer' 或 'blob' 不是标准的 json 响应，所以这是我基于 Vue 或 JS 的解决方案：

            axios.get(endpoint,{responseType: 'arraybuffer'})
            .then(response => {
                //Get filename from response headers
                let contentDisposition = response.headers["content-disposition"];
                let fileName = contentDisposition.split("filename=")[1];
                //Download file
                let blob = new Blob([response.data], { type: 'application/pdf' })
                let link = document.createElement('a')
                link.href = window.URL.createObjectURL(blob)
                link.download = fileName
                link.click()
            })
            .catch((error) => {
                //Handle error for responseType: 'arraybuffer'
                if (error instanceof AxiosError && error.response) {
                    let message = JSON.parse(new TextDecoder().decode(error.response.data)).message;
                    this.makeToast(message, "danger");
                }
            })