vue(js)excel(.xls.xlsx)ファイルのダウンロード(エクスポート)

vueダウンロードエクスポートexcelファイル

vue(js)excel(.xls.xlsx)ファイル

をダウンロード(エクスポート)

インタフェースファイルgetData.js

axiosはパッケージfetchを要求する.js

vue(js)excel(.xls.xlsx)ファイルのダウンロード(エクスポート)

直接上コード

<template>
	<div>
		{{message}}
	</div>
</template>
<script>
  //            
  import { exportBuyerOrderList } from '@/getData'
  export default {
    name: 'buyerStatisticsList',
    data() {
      return {
      	message: "   "
       }
    },
    methods: {
      //         async await    Promise   axios         
	  async exportFile() {
		// res         excel        
	    const res = await exportBuyerOrderList(
		    {
		      userId: "123", //       
		      name: "  ",	 //       
		    }, 
		    {
		      responseType: 'arraybuffer' //     
		    }
	    )
	    let filename = "excel  .xls";
	    this.fileDownload(res, filename); //     fileDownload  
	  },
	  //    excel   
	  fileDownload(data, fileName) {
	  	//    data              
	    let blob = new Blob([data], {
	      type: "application/octet-stream"
	    });
	    //             filename.xls
	    let filename = fileName || "filename.xls";
	    //   msSaveBlob      
	    if (typeof window.navigator.msSaveBlob !== "undefined") {
	      window.navigator.msSaveBlob(blob, filename);
	    } else { //   
	      //    blobURL 
	      var blobURL = window.URL.createObjectURL(blob);
	      //    a   
	      var tempLink = document.createElement("a");
	      //    a   
	      tempLink.style.display = "none";
	      //    a    href   
	      tempLink.href = blobURL;
	      //    a       download (    )
	      tempLink.setAttribute("download", filename);
	      if (typeof tempLink.download === "undefined") {
	        tempLink.setAttribute("target", "_blank");
	      }
	      document.body.appendChild(tempLink);
	      tempLink.click();
	      document.body.removeChild(tempLink);
	      window.URL.revokeObjectURL(blobURL);
	    }
	  },
    },
  }

</script>

インタフェースファイルgetData.js

//         js            (     getData.js)
//    fetch.js 
import fetch from '@/config/fetch'
/**
 *      /      /       
 */
export const exportBuyerOrderList = (data,param) => fetch('wxsupplier/supplierProvider/exportBuyerOrderList', data,param);

axiosはパッケージfetchを要求する.js

//          
import axios from "axios";

/**
 *       axios           (                 )
 */
axios.defaults.transformRequest = [function (data) {
  return qs.stringify(data);
}];

/**
 *     axios            get      post         put delete   
 */
export default async (url = '', data = {}, parame = {},type = 'POST', method = 'fetch') => {
  if (type == 'GET') {
    let dataStr = ''; //       
    Object.keys(data).forEach(key => {
      dataStr += key + '=' + data[key] + '&';
    })

    if (dataStr !== '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
      url = url + '?' + dataStr;
    }
  }
  if (window.fetch && method == 'fetch') {
    return new Promise((resolve, reject) => {
      axios.post(url, data, parame).then(res => {
        if (res.status === 200)
          resolve(res.data)
        else
          console.log("          200");
      }).catch(error => {
        reject(error)
      })
    })
  }
}