Vue ~ using Axios to download Excel files

Time:2021-2-19

The export or download function on the front-end Vue page is generally to call an interface of the back-end, which generates the stream information of Excel and word files and returns it to Vue. Then Vue builds the download action, which is sorted and encapsulated here to facilitate reuse in the future.

Encapsulating a download file

Use date, hour, minute, second and millisecond as the name of the file and download it as Excel file

/**
 *Download files
 */
export const downloadFile = (url,ext, params) => {
    let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
            'accessToken': accessToken
        },
        Responsetype: 'blob', // binary stream
    }).then(res => {
        //Process the returned file stream
        const content = res;
        const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' });
        var date =
            new Date().getFullYear() +
            "" +
            (new Date().getMonth() + 1) +
            "" +
            new Date().getDate() +
            "" +
            new Date().getHours() +
            "" +
            new Date().getMinutes() +
            "" +
            new Date().getSeconds() +
            "" +
            new Date().getMilliseconds();
        const fileName = date + "." + ext;
        if ("download" in document.createElement("a")) {
            //Non ie Download
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL ( elink.href ); // release the URL object
            document.body.removeChild(elink);
        } else {
            //Ie10 + download
            navigator.msSaveBlob(blob, fileName);
        }
    });
};

Encapsulate a component for specific functions, which is convenient to call in the foreground

//Evaluation export
export const getRecordExport= (params) => {
    return downloadFile('/record/export',"xlsx", params)
}

It is called on the Vue page to realize the export

import {
  getReportExport
} from "@/api/index";
import util from "@/libs/util.js";

export default {
  name: "task-manage",
 data() {},
 methods: {
   exportExcel() {
      getReportExport(this.searchForm).then(res=>{});
    }
 }
}
</code></code></pre>
<p>Screenshot < br > 1
<img src=" https://imgs.developpaper.com/imgs/118538-20200716134611085-409849118.png "ALT =" screenshot "loading =" lazy ">"</p>

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]