关于a标签下载设置下载保存类型，部署到线上出错

最新推荐文章于 2024-07-11 19:52:20 发布

woshishui099

最新推荐文章于 2024-07-11 19:52:20 发布

阅读量770

点赞数

分类专栏： vue.js js 文章标签： css vue html5

本文链接：https://blog.csdn.net/woshishui099/article/details/108146667

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue.js

7 篇文章 0 订阅

订阅专栏

写一个点击事件

在这里插入图片描述
a标签新的属性download

在这里插入图片描述

a标签中download属性部署到线上可能会出现属性失效，是因为出现跨域了。
解决方案：

<a @click="downloadFile(fileUrl,fileName)">下载文件</a>

downloadFile(url, fileName) {
    var x = new XMLHttpRequest();
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
    }
    x.send();
},

参考：https://blog.csdn.net/weixin_44379204/article/details/105056713?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param