Write this mainly is to make a record for oneself, later work encountered can be directly used. If you happen to be able to use it, that’s good too

Outlook: In general, the project downloads data to the computer, which is basically processed by the back end. The back end only needs to give a GET request interface, and the front end only needs to call. If you need to pass parameters to the back end. Just concatenate it to the URL. But when you need to pass a lot of arguments or if the argument is an object or an array. I’m sure that’s not going to work. I ran into him on a project today. Specific requirements: After the data is queried according to the conditions, select the data to download. And then the back end needs to get the set of ids that we checked. So the above method is not practical. And then you want to download it directly on your own

Then there is the following method, in fact, not their own, Baidu programming, we all understand

First of all this is what I use in a VUE project, so the following method is only used in a VUE project.

  1. The first step is to download a plug-in

       npm install -S file-saver xlsx
Copy the code

  2. If this is commonly used in a project, you can actually encapsulate a global function. Here I’m only using it on a separate page. First reference

       import XLSX from 'xlsx'
Copy the code

  3. And then this is the concrete function

    exportList () { // This method is page click trigger
  const list = this.listss.map(item= > {
    return {
      'risk ID':item.riskIdName,
      Value at risk: item.value,
      'source': item.source,
      'state': item.statusName,
      'Dead time': item.expiredTimeName,
      'note': item.remark,
    }
  })
  // The header of the downloaded XLSX file is displayed according to the key name of the data above, so you need to display the risk ID
  let wopts = {
     bookType: 'xlsx'.bookSST: false.type: 'binary'
   }
   var workBook = {
     SheetNames: ['Sheet1'].Sheets: {},
     Props: {}}//1, xlsx.utils.json_to_sheet (data) receives an array of objects and returns a worksheet with an automatically generated "header" based on the Object key. The default column order is determined by the first occurrence of the fields using object.keys
   //2. Put the data into the workBook Sheets and wait for output
   workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(list) // List data is the data you need to download

   //3, xlsx.write () start to write Excel table
   //4. ChangeData () processes data into a format that needs to be output
   this.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream'}})),changeData(s) {
  // If there is an ArrayBuffer object (ES6) it is best to use this object
  if (typeof ArrayBuffer! = ='undefined') {

    // create a memory region with a length of s.length
    var buf = new ArrayBuffer(s.length);

    Create a Unit8 view pointing to buf, starting at byte 0 and ending at the end of the buffer
    var view = new Uint8Array(buf);

    // return the Unicode encoding of the character at the specified position
    for (var i = 0; i ! = s.length; ++i) view[i] = s.charCodeAt(i) &0xFF;
    return buf;

  } else {
    var buf1 = new Array(s.length);
    for (var i1 = 0; i1 ! = s.length; ++i1) buf1[i1] = s.charCodeAt(i1) &0xFF;
    returnbuf1; }},saveAs(obj, fileName) {// Of course, you can customize the simple implementation of downloading files
  var tmpa = document.createElement("a");
  tmpa.download = fileName ? fileName + '.xlsx' : 'List Management' + '.xlsx';
  tmpa.href = URL.createObjectURL(obj); // Bind the A tag
  tmpa.click(); // Simulate click to download

  setTimeout(function () { // Delay release
    URL.revokeObjectURL(obj); RevokeObjectURL () releases the object URL
  }, 100);

}
Copy the code