Three ways to export excel from pages

One Pure front-end implementation ①

If the amount of data is small , And there is no processing logic , You can use that , The package is used file-saver

<div style="padding-top: 30px;">
   <el-button type="primary" @click="exportData"> Derived data </el-button>
</div>
 <el-table ref="multipleTableData" :data="tableData" :stripe="true">
        <el-table-column type="selection" min-width="2" :reserve-selection="true" align="center" />
        <el-table-column :resizable="false" prop="name" label=" The student's name " align="center" />
        <el-table-column :resizable="false" prop="age" label=" Age "  align="center" />
        <el-table-column :resizable="false" prop="area" label=" region " align="center" />
 </el-table>

<script>
    import fileSaver from 'file-saver'
    //  Derived data 
    exportData() {
      const dataArray = this.$refs.multipleTableData.selection
      console.log(dataArray, 'dataArray')
      let dataString = ` full name \t Age \t The province where it is located \n` //  Header text 
      for (let i = 0; i < dataArray.length; i++) {
        for (const key in dataArray[i]) {
          dataString += `${dataArray[i][key] + '\t'}` //  Each row of data is obtained and then spliced with a newline character 
        }
        dataString += '\n'
      }
      const blob = new Blob([dataString], { type: 'application/vnd.ms-excel' })
      const time = Date.now() //  Add a timestamp to the table name to distinguish 
      const filename = ' Student information sheet ' + time + '.xls'
      fileSaver.saveAs(blob, filename)
    }
</script>

The core of this method is that each row of data +'\n' Spliced with the header into a string , And then use it Blob analysis , The use of file-saver Bag saveAs Method is saved as excel;

Blob Represents a large object of binary type , It can be seen as a container for storing binary data , Besides , You can also use Blob Set the of binary data MIME type ;

var blob = new Blob(dataArr:Array<any>, opt:{type:string});  //  structure Blob function 

dataArray Represents an array , Contains information to add to Blob Data in object ,opt Represents an object , Used for setting up Blob Object properties （ Such as ：MIME type ）

created Blob Object contains two properties ：size and type,size Represents the size of the data （ In bytes ）,type yes MIME String of type ;

Two Pure front-end implementation ②

Or use Blob Realization , Use dynamic creation a How to label

<script>
    //  Derived data 
    exportData() {
      const dataArray = this.$refs.multipleTableData.selection
      console.log(dataArray, 'dataArray')
      let dataString = ` full name \t Age \t The province where it is located \n` //  Header text 
      for (let i = 0; i < dataArray.length; i++) {
        for (const key in dataArray[i]) {
          dataString += `${dataArray[i][key] + '\t'}` //  Each row of data is obtained and then spliced with a newline character 
        }
        dataString += '\n'
      }
      const blob = new Blob([dataString], { type: 'application/vnd.ms-excel' })
      const time = Date.now() //  Add a timestamp to the table name to distinguish 
      const filename = ' Student information sheet ' + time + '.xls'
      const link = document.createElement('a') //  establish a label 
      link.download = filename //  file name 
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob) //  establish URL object 
      document.body.appendChild(link) //  stay body Add a label 
      link.click()
      URL.revokeObjectURL(link.href)  //  Active release URL object 
      document.body.removeChild(link) //  remove a label 
}
</script>

among ,URL.createObjectURL() Static methods create a DOMString, It contains a that represents the object given in the parameter URL, This URL Life cycle and create it in the window of document binding . This new URL Object represents the specified File Object or Blob object , Used to specify the source object The content of ;

On each call createObjectURL() When the method is used , Will create a new one URL object , Even if you've created the same object as a parameter . When it's no longer needed URL Object time , Every object must be called by URL.revokeObjectURL() Method to release . The browser document When uninstalling , They are automatically released , But for best performance and memory usage , They should be released at a safe time .

3、 ... and Front and rear end fit

If there are a lot of exported data or the data can only be exported after processing , This method is more suitable for ;

Define the format of data and files from the back end , Return to the front end with a link , The front end can be exported by clicking the link , Use a Labels or window.loacation.href that will do ;

window.location.href = 'url' //  or 
<a href='url'></a>