Reputation: 81
I have a problem with .zip file download in Vue.js. here is my code.
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,
});
}
Here is my response header
I downloaded the file but it doesn't work.
but link it's work, it means, backend site has no problem. how can I fix this bug ?
and here is my code from server.
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',
]);
}
Upvotes: 1
Views: 2312
Reputation: 195
for downloading a file via axios you should set responseType in your axios header
responseType:'blob'
Upvotes: 2