vue实现文件的前端下载

<template>
<el-button type="primary" size="mini" @click="handleDownload(scope.row.fileUrl)">点击下载</el-button>
</template>
export default {
    name: 'DownloadFile',
    data() {
        return {
            fileUrl: 'http://localhost:8000/1.jpg'
        }
    },
    methods: {
        // 文件下载
        handleDownload(event) {
            let url = event  // url
            let urlArray = url.split('/');
            let filename = urlArray[urlArray.length - 1];

            const a = document.createElement('a');
            // 将url转成blob地址。如果url是一个完整的链接，需要后端开清跨域请求
            fetch(url).then(res => res.blob())
                .then(blob => { // 将链接地址字符内容转变成blob地址
                    a.href = URL.createObjectURL(blob)
                    a.download = filename // 下载文件的名字
                    document.body.appendChild(a)
                    a.click()
                })
        },
    }
}