浏览器下载策略
由于浏览器的策略问题,当文件类型为 pdf 或 jpg 等类型时,浏览器会默认进行预览,即使你设置了 download 属性,大多数浏览器都仍然会执行预览。
要想直接下载 pdf 或 jpg 之类的文件,就需要了解浏览器的文件策略。浏览器在文件请求中的 Content-Type 中可以获取到文件的类型,比如 pdf 的请求返回的 Content-Type: application/pdf,浏览器判断文件为 pdf ,则会自动执行预览的策略,如果我们在后端代码或nginx中设置其 Content-Type: application/octet-stream 则浏览器将会该文件识别为文件流,自动执行下载操作。
解决手段
通过一个get请求,将静态文件转换为文件流然后再进行下载
<el-button type="primary" @click="toDownload">下载</el-button>
1.新建a标签
private toDownload() {
if (this.filePath[0]) {
let fileUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
//鉴权
const sessionData: any = sessionStorage.getItem("token");
const tokenHead: any = sessionStorage.getItem("headerType");
let data: any = {
method: 'GET',
url: fileUrl,
responseType: 'blob'// 设置返回的数据类型
headers: { Authorization: tokenHead + sessionData },
};
axios(data).then((res: any) => {
if('download' in document.createElement('a')){
let blob = res.data;
const downloadElement = document.createElement('a');
downloadElement.href = URL.createObjectURL(blob);
downloadElement.download = this.fileContent.fileName;
downloadElement.target = '_blank';
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
}else{
var blob = new Blob([content]);
navigator.msSaveBlob(blob,fileName)
}
});
}
}
2.新建input标签
const uploadClick = () => {
const inputEle = document.createElement("input");
inputEle.type = "file";
inputEle.accept =
"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
inputEle.onchange = (ev: any) => {
if (ev.target.files.length == 0) return;
const upFile =ev.target.files[0];
if (upFile.size > 1024 * 1024 * 10) {
ElMessage.error("上传文件大小不能超过10M");
return;
}
const formData = new FormData();
formData.append("file", upFile);
areaUpload(formData).then((res: Result) => {
//……
});
};
inputEle.click();
};
Blob 构造函数
简述:使用 Blob 构造函数可以直接在客户端上创建和操作 Blob(通常等效于一个文件)。
使用:
//创建
var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);
//msSaveBlob:只提供一个保存按钮
window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
//msSaveOrOpenBlob:提供保存和打开按钮
window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');