时间戳

首页 > 解决方案 > 使用 Laravel、VueJS 和 Inertiajs 导出 Excel

laravel - 使用 Laravel、VueJS 和 Inertiajs 导出 Excel

问题描述

我正在尝试在 和 上构建和Laravel应用VueJS程序inertiajs。

我maatwebsite/excel用来将我的数据导出为 excel 格式。

我有一个正常HTML形式的 vue 组件

家.vue

<form action="/project-profile" target="_blank" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="_token" :value="csrf.content" />
    <input type="hidden" name="slug" :value="JSON.stringify(generalDetails.slug)" />
    <button class="font-medium tracking-wide">Download Profile</button>
</form>

在挂载方法上，我只是放置我的csrf令牌。

mounted() {
    this.csrf = document.head.querySelector('meta[name="csrf-token"]');
}

在Laravel某种程度上，我在web.php文件中做了一条路线

Route::post('project-profile','ProjectProfileExportController@ProjectProfile');

每当我尝试导出或提交表单时，我都会收到page expired错误，我遵循了一些指南，它说有问题，csrf_token但是在检查表单时我可以看到token正确放置。

我尝试通过将其设置为 api 来做同样的事情api.php：

Route::post('project-profile', 'ProjectProfileExportController@ProjectProfile');

但这件事也没有按预期工作。

页面过期屏幕截图

检查表单元素的屏幕截图

欢迎任何更好的方法。谢谢。

标签： laravelvue.jsmaatwebsite-excel

解决方案

Inertia.js 的创建者在这里。

因此，我们建议不要像这样在每个请求上手动发送csrf令牌。

更好的方法是为此使用 axios 中已经内置的 CSRF 功能。Axios 是 Inertia 在后台使用的 HTTP 库。

Axios 会自动检查XSRF-TOKENcookie 是否存在。如果它存在，它会将令牌包含在X-XSRF-TOKEN它发出的任何请求的标头中。

实现这一点的最简单方法是使用服务器端中间件。只需XSRF-TOKEN在每个响应中包含 cookie，然后使用X-XSRF-TOKEN来自 axios 的请求中发送的标头验证令牌。

一些框架，例如 Laravel，会自动执行此操作，这意味着不需要配置。因此，我建议csrf-token从您的模板中删除元标记，并_token从您的请求中删除。那应该可以解决您的问题。

综上所述，请记住，您将无法从 Inertia 请求中下载 Excel 文件。所有惯性请求必须返回一个有效的惯性响应。你可以用window.open这个。像这样的东西：

window.open(`/url/to/excel/download?slug=${generalDetails.}`, '_blank')

推荐阅读