失败，zip 文件通过 axios 从 vuejs 下载

Question

我在 Vue.js 中下载 .zip 文件时遇到问题。这是我的代码。

if (response) {
                    let fileName = response.headers["x-suggested-filename"]
                    var fileUrl = window.URL.createObjectURL(new Blob([response.data], {type: "application/zip"}));
                    var fileLink = document.createElement("a");
                    fileLink.href = fileUrl;
                    fileLink.setAttribute("download", fileName);
                    document.body.appendChild(fileLink);
                    fileLink.click();
                } else {
                    this.$notify.error({
                        title:    "Request failed",
                        message:  "No response received. ",
                        duration: 0,
                    });
                }

这是我的回复标题

我下载了文件，但它不起作用。

但是链接可以工作，这意味着，后端站点没有问题。 我该如何解决这个错误？

这是我的服务器代码。

public function export(array $params)
{
    if (!$this->load($params, '') || !$this->validate()) {
        throw new BadRequestHttpException();
    }

    $exporter = new ProfileExporter($this->format);
    $zipFile = new ZipFile();

    $exporter->exportToZipFile($zipFile, $this->profileId, $params);
    $fileName = 'df-profile-data-export-' . \Yii::$app->formatter->asDate('now', 'yyyy-MM-dd') . '.' .
        $this->getFileExtension();

    $stream = fopen('php://memory', 'w+');
    $zipFile->writeToStream($stream);
    \Yii::$app->response->headers->add('X-Suggested-Filename', $fileName);

    \Yii::$app->response->sendStreamAsFile($stream, $fileName, [
        'mimeType' => 'application/zip',
    ]);
}

Answer 1

要通过 axios 下载文件，您应该在 axios 标头中设置 responseType

responseType:'blob'