如何在 axios 请求中使用 Maatwebsite\Excel 下载 csv 文件？答案

【问题标题】：How to download csv filw with Maatwebsite\Excel in axios request?如何在 axios 请求中使用 Maatwebsite\Excel 下载 csv 文件？
【发布时间】：2019-06-13 19:43:09
【问题描述】：

在 laravel 5.8 / axios "^0.18", "vue": "^2.5.17" 应用程序中，我使用 Maatwebsite\Excel 上传 csv 文件如果我在 GET 请求中运行 laravel 控制，它可以工作，但我使用 axios 进行发布请求和运行请求，文件根本没有下载。我在 JS 代码中运行我的请求：

        axios({
            method: ( 'post' ),
            url: this.$store.getters.apiUrl + '/personal/run-user-list-export-to-csv',
            data: { user_id : user_id, user_list_id: user_list_id },
        }).then((response) => {
            this.showPopupMessage("User list export", "User list successfully exported !", 'success');
        }).catch((error) => {
            this.showPopupMessage("User list export", 'Error exporting user\'s list !', 'error');
        });

有控制：

public function run_user_list_export_to_csv() // http://127.0.0.1:8000/api/run-user-list-export-to-csv
{
    $request= request();
    ...

    $ret= \Excel::download(new exportSearchResults($user_list_id), 'file.csv');  // if write RETURN this line file is not downloaded anyway...
    return response()->json( ['error_code' => 1, 'message' => '', 'ret' => $ret, HTTP_RESPONSE_INTERNAL_SERVER_ERROR ] );
} // public function storerun_user_list_export_to_csv(UserLisRequest $request)

我浏览器的响应我看到输出：

{"error_code":1,"message":"","ret":{"headers":{}},"0":500}

但是文件没有下载。正确程度如何？

修改： 我试图通过在我的控制操作中发送标题来重新制作，例如：

public function run_user_list_export_to_csv() 
{
    $request= request();
    ...
    $filename= $title.'.csv';
    $download_path= $filename;
    $ret= \Excel::download(new exportSearchResults($user_list_id), $download_path);
    \Log::info($ret);
    $headers = ['Content-Type: application/csv','Content-Disposition: attachment; filename={$filename}'];

    return response($download_path, 200,$headers);
} // public function storerun_user_list_export_to_csv(UserLisRequest $request)

我在日志文件输出中看到：

[2019-06-14 04:46:23] local.INFO: HTTP/1.0 200 OK
Cache-Control:       public
Content-Disposition: attachment; filename="aaa Z3  iuy65 .csv"
Date:                Fri, 14 Jun 2019 04:46:23 GMT
Last-Modified:       Fri, 14 Jun 2019 04:46:23 GMT

但是没有下载文件。哪个是正确的方法？

修改 2： 1) 我生成了 csv 文件，但在浏览器的下载方法中下载失败。这种方式对我来说似乎更可取。但我可以将生成的 csv 文件移动到某个目录（比如 /home/user/ ）并在客户端的 csv 应用程序中打开它。

2) 我如何使用 vue js 定义当前用户的名称和他的下载目录（记住客户端可以有不同的操作系统）

修改 3：

我找到了这个https://github.com/ynishi/vuecsv 插件并尝试安装它。

$ npm install ynishi/vuecsv

> core-js@2.6.9 postinstall /mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> bootstrap-vue@1.5.1 postinstall /mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/node_modules/bootstrap-vue
> opencollective postinstall || exit 0


                                                                                          Thanks for installing bootstrap-vue 
                                                                                     Please consider donating to our open collective
                                                                                            to help us maintain this package.

                                                                                               Number of contributors: 227
                                                                                                  Number of backers: 31
                                                                                                   Annual budget: $774                                                                                                 
                                                                                                 Current balance: $1,190                                                                                               

                                                                             Donate: https://opencollective.com/bootstrap-vue/donate                                                                                   

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})                                                      

+ vuecsv@0.0.10                                                                                                                                                                                                        
added 44 packages from 32 contributors and audited 17038 packages in 87.476s                                                                                                                                           
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

上面的输出有点不寻常，但它只是广告。接下来我运行：

 npm audit fix
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.632s
fixed 0 of 1 vulnerability in 17038 scanned packages
  1 vulnerability required manual review and could not be updated

在 package.json 之后：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.4.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "cors": "^2.8.5",
        "remove": "^0.1.5",
        "v-tooltip": "^2.0.2",
        "vee-validate": "^2.2.5",
        "vee-validate-laravel": "^1.1.0",
        "vue-js-modal": "^1.3.31",
        "vue-moment": "^4.0.0",
        "vue-notification": "^1.3.16",
        "vue-router": "^3.0.6",
        "vue-select": "^3.1.0",
        "vue-slider-component": "^3.0.31",
        "vue2-filters": "^0.6.0",
        "vuecsv": "github:ynishi/vuecsv",
        "vuejs-paginate": "^2.1.0",
        "vuex": "^3.1.0"
    }
}

我尝试使用这个https://jsfiddle.net/ynishif/1ztu8x8q/ 小提琴，但是我的文件中引用了错误：

app.js?dt=1560770053:2823 Uncaught ReferenceError: VueCSV is not defined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Horizontal/personal/userLists/list.vue?

在/Horizontal/personal/userLists/list.vue：

<script>
    ... 
    import Vue from 'vue';
    Vue.component("csv-download", VueCSV.CsvDownload)

我很困惑，因为 VueCSV 没有在任何地方定义，但如果提到小提琴它就可以工作。

我错过了什么？

修改 4： 我尝试在我的 *.vue 文件中导入 vuecsv，在安装 vuecsv.min.js 之后我有 /node_modules/vuecsv/dist/vuecsv.min.js 文件在我的 vue 文件中，我尝试制作：

<script>

    import {bus} from '../../../../app';
    import appMixin from '../../../../appMixin';

    //import
    import VueCSV from '/vuecsv/dist/vuecsv.min.js';    // /node_modules/vuecsv/dist/vuecsv.min.js
    Vue.use(VueCSV);

    Vue.component("csv-download" , VueCSV.CsvDownload )

但在控制台中我看到错误：

ERROR in ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '/vuecsv/dist/vuecsv.min.js' in '/mnt/_work_sdb8/wwwroot/lar/wiznext/msg-laravel-application/resources/js/components/Horizontal/personal/userLists'
 @ ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&) 124:0-48 127:8-14 132:30-36
 @ ./resources/js/components/Horizontal/personal/userLists/list.vue?vue&type=script&lang=js&
 @ ./resources/js/components/Horizontal/personal/userLists/list.vue
 @ ./resources/js/routes.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/Horizontal/app.scss ./resources/sass/Horizontal/style_lg.scss ./resources/sass/Horizontal/style_md.scss ./resources/sass/Horizontal/style_sm.scss ./resources/sass/Horizontal/style_xs_320.scss ./resources/sass/Horizontal/style_xs_480.scss ./resources/sass/Horizontal/style_xs_600.scss

如果我将导入行修改为：

    import VueCSV from 'vuecsv';    // /node_modules/vuecsv/dist/vuecsv.min.js
I see error in npm console : 
This dependency was not found:

* Vue in ./node_modules/vuecsv/dist/vuecsv.min.js

To install it, you can run: npm install --save Vue

确定我已经安装了 vue。

哪种方式是正确的？难道是这个插件不起作用？你能提出类似的建议吗？

【问题讨论】：

请看修改块
请看修改后的2块
请看修改后的3块
请看修改后的4块

标签： laravel-5 axios maatwebsite-excel

【解决方案1】：

使用 axios 上传文件：

const config = {
   headers: {
              "content-type": "multipart/form-data",
              "Access-Control-Allow-Origin": "*"
            }
   };
axios.post(ROOT+'/image/upload',data,config);

你的 laravel 路线：

Route::post('/image/upload','API\ImageController@upload');

你的图像控制器：

public function upload(Request  $request)
{
    $file = $request->file('image');

【讨论】：