简简单单的记录一下项目中做过的东西
项目中时常会有要求查看附件，附件的下载的要求，在这里简单记录一下前端vue根据后端接口返回文件地址实现在线预览和下载功能。
👀文件在线预览
目前我这里使用的是点击a链接跳转页面的做法，这个方法适用于gif，png，jpeg，jpg，mp4，pdf，mp3格式文件的在线预览，对于excel，word，zip，pptx他会自动下载到本地，可以下载后查看，主要功能代码如下：
preview(row){
// row="https://xxxxxxx.pdf"
var myHref = document.createElement('a')
myHref.href = row.href
myHref.target = "_blank"
myHref.click()
}
📁文件下载功能
这里记录的文件下载也是直接后端返回文件地址，然后下载，这个方法目前我自己测试能够支持有gif，png，jpeg，jpg，mp4，pdf，mp3，excel，word，zip，pptx，txt，mov文件格式。主要功能代码如下：
/**
* @description: 下载
* @return {*}
*/
handleDownload(row) {
let url = this.baseUrl + row.fileUrl;
this.fileLinkToStreamDownload(url, row);
},
fileLinkToStreamDownload(url, row) {
let fileName = row.fileName;
let xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.setRequestHeader(
"Content-Type",
`application/pdf`,
`application/msword`,
`image/png`,
`image/jpeg`,
`image/gif`,
`text/plain`,
`application/octet-stream`,
`text/xml`
);
xhr.responseType = "blob";
let that = this;
xhr.onload = function () {
if (this.status == 200) {
//接受二进制文件流
var blob = this.response;
that.downloadExportFile(blob, fileName);
}
};
xhr.send();
},
downloadExportFile(blob, tagFileName) {
let downloadElement = document.createElement("a");
let href = blob;
if (typeof blob == "string") {
downloadElement.target = "_blank";
} else {
href = window.URL.createObjectURL(blob); //创建下载的链接
}
downloadElement.href = href;
//下载后文件名
downloadElement.download = tagFileName;
downloadElement.click(); //点击下载
if (document.body.downloadElement) {
document.body.removeChild(downloadElement); //下载完成移除元素
}
if (typeof blob != "string") {
window.URL.revokeObjectURL(href); //释放掉blob对象
}
},
上面这个文件下载还有可能能够支持其他格式，这个就需要大家自己一个一个去测试了。
简单记录一下，以防下次找不到！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
