Question

单击按钮后，我已经下载了csv文件。该文件应在下载前立即生成。我尝试通过以下方式进行操作：

html：

<a class="btn btn-primary" @click="downloadCsv">Download CSV</a>
  <a v-if="fileObjectUrl !== null" ref="downloadCsv" :download="fileName" 
     :href="fileObjectUrl"
     :downloadUrl="downloadurl"></a>

JavaScript：

downloadCsv () {
  let csv = this.createCsv()
  let blob = new Blob([csv], { type: 'text/csv' })
  this.fileObjectUrl = window.URL.createObjectURL(blob)
  this.$refs.downloadCsv.click()
},

但是这不起作用，因为vue不会立即更新fileObjectUrl，因此仅当我单击按钮两次时才下载文件。还有另一种方法来创建文件并顺序下载吗？

Answer 1

来自Vue - Async Update Queue：

如果您尚未注意到，Vue会执行DOM更新异步地。每当观察到数据更改时，它将打开一个排队并缓冲同一事件中发生的所有数据更改环。如果同一观察者被多次触发，它将是仅一次进入队列。这种缓冲的重复数据删除是对于避免不必要的计算和DOM操作很重要。然后，在下一个事件循环“ tick”中，Vue刷新队列并执行实际的（已删除重复数据）工作。

在您click()时，Vue尚未更新DOM，因此您需要让Vue稍等片刻。因此，使用Vue.$nextTick()在下一个刻度之后安排clikc()。

对您而言，它将是：

this.$nextTick(function(){
    this.$refs.downloadCsv.click();
});

创建并下载文件

1 个答案: