vue中各种文档的下载/导出
1.下载本地的文件
1.在vue-cli 3.x+中，直接将文件放在public下面
window.location.href="/file/xxx.doc"
这种写法本地不会有问题，但是线上部署出现了问题，显示文件找不到；所以改为
window.location.href=`${process.env.BASE_URL}file/beian_import.xls`
当前也可以不用window.location.href来下载，可以使用dom动态生成a标签来下载；
downExcel(){
var link = document.createElement("a");
link.setAttribute("download", "");
link.href = `${process.env.BASE_URL}file/beian_import.xls`;
link.click();
link.remove();
},
2.在vue-cli 2.x+中将文件放置在static文件夹下面
window.location.href="http://localhost:8080/static/template.xlsx" ;
2.下载后台返回数据成功的json文件
downJson(data,file_name){
exportRecordDown(data).then(res=>{
var data = JSON.stringify(res.data)
//encodeURIComponent解决中文乱码 data:text/csv;charset=utf-8,/uFEFF(加 /uFEFF是实现bob)
let uri ='data:text/csv;charset=utf-8,' +encodeURIComponent(data);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = file_name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
3.下载csv文件
handleExport(){
if(!this.tableData || this.tableData.length <=0 ){
this.$message.error('没有要导出的数据')
return
}
let csvContent = this.headerLabel + '/n/t'
this.tableData.forEach((item, index) => {
let dataString = ''
for(let i = 0; i < this.headerProp.length; i++ ){
//如果数据为null或者undefined， 下载下来的数据框中会被直接填写上null或undefined
//可根据个人选择自行选择是否需要这行代码
if(item[this.headerProp[i]]==null||item[this.headerProp[i]]==undefined){
item[this.headerProp[i]] = ''
}
dataString += item[this.headerProp[i]] + ','
}
csvContent += (index < this.tableData.length ? dataString.replace('/,$/', '/n/t') : dataString.replace('/,$/', '/n/t'))+'/n/t'
})
console.log(csvContent)
//最终csvContent的格式为"col1,col2,col3 /n value1, value2, value3 /n value4, value5, value6"
//data:text/csv;charset=utf-8,/ufeff, utf-8的编码格式，保证中文不乱码
// this.$refs.link.setAttribute('href', 'data:text/csv;charset=utf-8,/ufeff'+encodeURIComponent(csvContent))
// this.$refs.link.setAttribute('download', this.fileName+'.csv')
var url='data:text/csv;charset=utf-8,/ufeff'+encodeURIComponent(csvContent);
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '僵尸网站数据表'+'.csv')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
},
//数据遍历筛选
computed: {
headerLabel(){
var result=[];
this.checkListShow.forEach(item=>{
result.push(item.name)
})
return result
},
headerProp(){
var result=[];
this.checkListShow.forEach(item=>{
result.push(item.prop)
})
return result
}
},
3.下载后台返回文件流数据
image.png
exportBillingExcel(data, res){
if (!data) {//如果没有data数据就不进行操作
return
}
// 获取headers中的filename文件名
let tempName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
// iconv-lite解决中文乱码
let iconv = require('iconv-lite')
iconv.skipDecodeWarning = true// 忽略警告
let fileName = iconv.decode(tempName, 'gbk')
let blob = new Blob([data], { type: 'application/octet-stream' })//转换成二进制对象
if ('download' in document.createElement('a')) { // 不是IE浏览器
let url = window.URL.createObjectURL(blob)//二进制对象转换成url地址
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
} else {
window.navigator.msSaveBlob(blob, fileName)
}
},
4.下载后台返回数据的.log后缀、.pem后缀文件
downFile(data,name){
let blob = new Blob([data], {type: "application/octet-stream"}); //下载文件的通用格式
console.log(window.navigator.msSaveBlob)
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, name+ '.' + 'log');//处理IE下载的兼容性
} else {
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = name+ '.' + 'log' ; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
}
5.下载图片
link.setAttribute("download", "");
link.href ="图片地址路径";
link.click();
6.下载二进制流文件
exporBeianPdf('', { responseType: 'blob' })
.then(res => {
this.downBinary(res);
})
.catch(() => {
this.$message.error('导出失败，请重试。');
});
// 下载二进制文件
downBinary(res) {
const data = res.data;
const tempName = res.headers['content-disposition']
.split(';')[1]
.split('filename=')[1];
/* 兼容ie内核，360浏览器的兼容模式 */
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
const blob = new Blob([data]);
window.navigator.msSaveOrOpenBlob(blob, tempName);
} else {
/* 火狐谷歌的文件下载方式 */
var blob = new Blob([data]);
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = tempName;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
}
},
7.base64文件下载，图片和文件都适用
dwonImageBase64(name,data){
//let imgData = "data:image/jpg;base64," + ret;
//data是带有"data:image/jpg;base64,"的内容的值
this.downloadFile(name, data);
},
downloadFile(fileName, content) {
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click()
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
},
8.前端实现批量下载文件
function downloadFile(url) {
var iframe = document.createElement('iframe')
iframe.style.display = 'none' // 防止影响页面
iframe.style.height = 0 // 防止影响页面
iframe.src = url
document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求
console.log(iframe)
// 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
setTimeout(() => {
iframe.remove()
}, 5000)
}
9.axios请求responseType为blob时，错误数据处理
remoteRecoverPost(data) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
getTokenData().then((res) => {
remoteRecover(data, {
headers: {
common: { 'X-CSRFToken': res.data.data.csrf_token },
},
responseType: 'blob',
})
.then((ress) => {
loading.close();
const resData = ress.data;
const fileReader = new FileReader();
fileReader.onloadend = () => {
try {
const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
this.$message.warning(jsonData.msg);
} catch (err) {
// 解析成对象失败，说明是正常的文件流
// 下载文件
this.exportBillingExcel(ress);
}
};
fileReader.readAsText(resData);
})
.catch(() => {
loading.close();
});
});
},
上面只写了一种判断方法，其实还有一种，如下
if (resData.type === 'application/json') {
const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
// 后台信息
console.log(jsonData)
} else {
// 下载文件
his.exportBillingExcel(ress);
}
共有 0 条评论