SoFunction
Updated on 2025-04-04

How to save data to disk files in Vue

There are many examples on the Internet, but they are not copied directly under vue. They may cause various errors. After several hours of trouble, they finally got it done.

Take as an example

<mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">Export</mt-button>

The following defines the function in the method

<code class="language-html">methods:{ 
  ExportData(){ 
  //Define the file content, the type must be Blob. Otherwise, createObjectURL will report an error.  let content = new Blob([()]) 
 
  //Generate url object  let urlObject =  ||  || window  
  let url = (content)  
  //Generate <a></a>DOM element  let el = ('a') 
  //Link assignment   = url 
   ="todo file export.txt" 
  // Must click, otherwise it will not be downloaded  ()  
  //Remove link to release resources  (url) 
  } 
}&lt;/code&gt; 

A few things to note

1. You cannot use new activexobject to download under chrome. This method is only applicable to ie.

2. The parameter of createObjectURL must be of blob type, otherwise an error will be reported.

After completing the export, you still need to be able to import the data. I'll do it next time

The above method of saving data to disk files in Vue is all the content I share with you. I hope you can give you a reference and I hope you can support me more.