使用 Laravel、VueJS 和 Inertiajs 导出 Excel答案

【问题标题】：Export Excel with Laravel, VueJS and Inertiajs使用 Laravel、VueJS 和 Inertiajs 导出 Excel
【发布时间】：2021-04-27 14:34:02
【问题描述】：

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

我正在使用maatwebsite/excel 将我的数据导出为 excel 格式。

我有一个具有普通HTML 表单的 vue 组件

home.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');

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

Screenshot of page expired screen

Screenshot of inspect form element

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

【问题讨论】：

标签： laravel vue.js maatwebsite-excel

【解决方案1】：

这里是 Inertia.js 的创建者。

所以，we recommend 不会像这样在每个请求上手动发送 csrf 令牌。

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

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

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

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

总而言之，请记住，您将无法通过 Inertia 请求下载 Excel 文件。所有惯性请求必须返回一个有效的惯性响应。您可以为此使用window.open。像这样的：

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

【讨论】：