使用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>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');
但是这件事也没有按预期工作。
页面过期屏幕截图
检查表单元素的屏幕截图
欢迎任何更好的方法。谢谢。
回答
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')