vue下载图片及文件
2021-07-08 本文已影响0人
小鱼儿_逆流而上
小鱼儿心语：人教人，教不会，事教人，一次就好，吃亏和吃饭一样，吃多了就会成长！
今天和大家分享下载不同格式的图片以及文件的方法！这也是我百度到天荒地老找到的最好用的方法，希望可以帮到你们！
一、首先使用 window.open（） 下载文件： 在本页面打开并防止浏览器拦截
用window.open（）直接打开请求地址或者返回的url，可能会因为跨域问题导致浏览器拦截
解决办法是：在请求前，打开一个窗口，然后将请求地址或者返回的url直接赋值给该窗口的href
downFileUrl() {
var mywin = window.open('','_self'); //注意一定要在请求前操作此步,防止浏览器拦截
downfileUrl().then(res => { //这里是自己封装的ajax方法
mywin.location.href = res.data.url;
});
}
二、废话不说，代码展示，复制即可用
downFileUrl() {
var img = '后台返回的文件地址'; //注意需要拼接域名访问哦~
const url = img;
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
if (this.status == 200) {
const blob = this.response;
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = '文件名称' + url.substring(url.lastIndexOf(".") + 1, url.length);
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
};
xmlhttp.send();
},
三、使用a标签进行下载
如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可，如下：
<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf">附件下载</a>
但是，对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载，而是会直接打开，这时候一个新属性就要上场了--【download】，如下：
<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf" download="test.pdf">附件下载</a>
仅管使用【download】，也会有不同的情况
- 使用的地址是直接使用的IP端口的，原因就出在这里：当请求地址是ip的时候 a 标签的 download 属性无法生效。
<a href="http://192.168.xx:8089/virtualPath/facility/document/2018/07/09/44a9a76a-084a-415a-9d50-e26ea28b55ce/0b48ed694ef510393ad2e829d6ec2fad.jpg" download="" class=""></a>- 解决办法：将ip改成域名
<a href="http://www.xx.com/virtualPath/facility/document/2018/07/09/44a9a76a-084a-415a-9d50-e26ea28b55ce/0b48ed694ef510393ad2e829d6ec2fad.jpg" download="" class=""></a>
以下是我个人的实操，大家仅供参考，直接上图：
下载.png
如上图所示，点击 下载附件 下载不同类型的图片及文件；接下来废话不多说直接上代码:
<template>
<div class="app-container">
<el-dialog
append-to-body
:close-on-click-modal="false"
:before-close="crud.cancelCU"
:visible.sync="crud.status.cu > 0"
title="隐患验收"
width="690px"
top="7vh"
>
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px" >
<el-form-item label="附件" prop="acceptfileName" label-width="90px">
<el-upload
ref="upload"
:on-change="changeFileAccept"
:auto-upload="false"
:limit="1"
:headers="headers"
:action="hiddenUploadApi + '?fileName=' + form.acceptfileName"
:file-list="acceptfileList"
>
<div
class="eladmin-upload"
@click="downFileUrl(form.id, '验收')" // 点击下载附件按钮进行下载
v-if="crud.isExamine == 'examinedetail'"
style="width: 85px"
>
<i class="el-icon-download" />下载附件
</div>
</el-upload>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
- 以上是展示部分，点击下载附件进行下一步操作，直接复制即可用，具体的变量根据自身情况进行修改，代码如下：
通过后台返回的文件地址，与域名拼接进行下载~
我这里下载需要id参数以及type参数，大家可以根据具体情况进行修改
// 通过后台返回的地址，下载附件
downFileUrl(id, type) {
//注意一定要在请求前操作此步，防止下载跳转闪烁的问题
var mywin = window.open('', '_self');
downfileUrl(type ? crud.downUrlDanger : crud.downUrladdress, {
parentId: id,
module: type ? type : ''
}).then(res => {
// 图片常用格式
let type = 'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng'
// 下载地址
let content = crud.baseApiurl + res.data.path.slice(1, res.data.path.length);
let arr = []
arr = res.data.path.split('/')
// 文件名
crud.filename = res.data.name.split('.')[0] + '.'
// 文件类型
let suffix = arr[arr.length - 1].split('.')[1]
// 文件大小
let size = res.data.size / 1024 / 1024;
// --------------------------文件大于10M的下载-------------------------------------------------
if (size > 10 && type.indexOf(suffix) == -1) {
mywin.location.href = crud.baseApiurl + res.data.path.slice(1, res.data.path.length);
} else {
// --------------------------图片文件下载（低于10MB的文件及所有类型图片）------------------------------
var img = content;
const url = img;
// window.open(_this.detail.imgUrl)
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
if (this.status == 200) {
const blob = this.response;
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
// link.download = url.substring(url.lastIndexOf("/") + 1, url.length);
link.download = crud.filename + url.substring(url.lastIndexOf(".") + 1, url.length);
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
};
xmlhttp.send();
}
})
},
