前端vue中文件下载的三种方式汇总

昙花一现可倾城f

5781人浏览 · 2022-08-01 10:53:07

昙花一现可倾城f · 2022-08-01 10:53:07 发布

前端vue中文件下载的三种方式

第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：

1	`<a` `:href='"/user/downloadExcel"'` `>下载模板</a>`

另一种情况是创建div标签，动态创建a标签：

<div name="downloadfile" onclick="downloadExcel()">下载</div>

function downloadExcel() {

let a = document.createElement('a')

a.href ="/user/downloadExcel"

a.click();

}

还有一种补充：

function downloadExcel() {

window.location.href = "/tUserHyRights/downloadUsersUrl";

}

第二种方式通过创建iframe的方式：

<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>

//method方法：

handleExport(row) {

var elemIF = document.createElement('iframe')

elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +

'&category=' + row.category

elemIF.style.display = 'none'

document.body.appendChild(elemIF)

}

第三种方式，会对后端发的post请求，使用blob格式

<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>

//method方法

handleExport(row){

const url="/user/downloadExcel"

const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}

exportExcel(url,options)

}

/**

* 封装导出Excal文件请求

* @param url

* @param data

* @returns {Promise}

*/

//api.js

export function exportExcel(url, options = {}) {

return new Promise((resolve, reject) => {

console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))

axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'

axios({

method: 'post',

url: url, // 请求地址

data: options, // 参数

responseType: 'blob' // 表明返回服务器返回的数据类型

}).then(

response => {

resolve(response.data)

let blob = new Blob([response.data], {

type: 'application/vnd.ms-excel'

})

console.log(blob)

let fileName = Date.parse(new Date()) + '.xlsx'

if (window.navigator.msSaveOrOpenBlob) {

// console.log(2)

navigator.msSaveBlob(blob, fileName)

} else {

// console.log(3)

var link = document.createElement('a')

link.href = window.URL.createObjectURL(blob)

link.download = fileName

link.click()

//释放内存

window.URL.revokeObjectURL(link.href)

}

},

err => {

reject(err)

}

)

})

}

如果后端提供的下载接口是get类型，可以直接使用方法一和二，简单又便捷；当然如果想使用方法三也是可以的，不过感觉有点舍近求远了。

如果后端提供的下载接口是post类型，就必须要用方法三了。

附：vue实现图片或文件下载功能实例

要自己创建一个a标签，以下就是下载功能的实现

这里是调用接口之后如果code=200时进行下载

if (res.code == 200) {

const link = document.createElement("a"); //自己创建的a标签

link.href = res.data;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

window.URL.revokeObjectURL(res.data);

}

2、还有一种情况是下载单张图片，如果用上面方法会直接跳转到了图片链接，并不会实现下载。下面则是下载单张图片的方法

getUrlBase64(imgUrl) {

return new Promise((resolve) => {

let canvas = document.createElement("canvas");

let ctx = canvas.getContext("2d");

let img = new Image(); //允许进行跨域

img.crossOrigin = "Anonymous";

img.src = imgUrl;

img.onload = function() {

canvas.height = img.height; //图片的高度

canvas.width = img.width;//图片的宽度

ctx.drawImage(img, 0, 0, img.width, img.height);

let dataURL = canvas.toDataURL("image/png");

canvas = null;

resolve(dataURL);

};

});

},

//点击下载图片按钮的事件

handleDowondImg(url, name) {

this.getUrlBase64(url).then((base64) => {

const link = document.createElement("a");

link.href = base64;

link.download = this.$route.query.source;

link.click();

});

},

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^