在 Vue 中下载 DWG 文件答案

【问题标题】：Download DWG file in Vue在 Vue 中下载 DWG 文件
【发布时间】：2021-11-04 17:35:06
【问题描述】：

问题

我目前正在尝试下载一个私有存储在 Laravel 存储中的 dwg 文件。我在带有触发控制器方法并且工作正常的标签的刀片上执行此操作。我现在正在尝试使用 axios 调用在 Vue 模板中实现相同的功能，并且返回的文件不是 dwg。这是我的前端和后端代码。

前端

 downloadDrawing: function() {
                axios.get({
                  url: this.downloadFileRoute,
                  method: 'GET',
                  responseType: 'arraybuffer',
                }, null, {
                  params: {
                    disk: 'drawings', 
                    name: `${this.modelNo}.DWG`
                  }
                })
                .then(response => {
                  console.log(response);

                  let newBlob = new Blob([response.data], {type: 'application/acad'});
                  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(newBlob);
                  } else {
                    const data = window.URL.createObjectURL(newBlob);
                    let link = document.createElement('a');
                    link.href = data;
                    link.download = `${this.modelNo}.DWG`;
                    link.click();
                    setTimeout(function () {
                      window.URL.revokeObjectURL(data);
                    }, 100);
                  }
                })
                .catch(error => console.warn(error));
              },

后端

public function downloadFile($disk, $name)
    {
        $storage = Storage::disk($disk);
        if ($storage->exists($name)) {
            return $storage->download($name);
        } else {
            return abort(404);
        }
    }

【问题讨论】：

标签： laravel vuejs2

【解决方案1】：

我能够通过切换到 a 标签而不是 axios 调用来解决这个问题。这是我的 a 标签代码，其中 url 是一个计算值。

<div class="tw-relative">
              <div v-show="toolTip" class="tw-block tip tw-border tw-rounded tw-bg-gray-100 tw-absolute" style="z-index: 1; bottom: 30px;">
                  Download drawing for {{ modelNo }}
              </div>
              <a class="btn btn-secondary btn-sm" :href="url" @mouseenter="toggleToolTip" @mouseleave="toggleToolTip">
                <i class="far fa-arrow-to-bottom"/>
              </a>
</div>

【讨论】：