vue和js点击下载pdf,word,png,jpg等格式的文件，解决点击下载pdf却是打开预览的问题
前言：
在我们项目中，下载png,jpg的文件是非常方便的，动态生成一个a标签，给他赋值路径，动态点击，就可以实现这个功能，但是pdf，word等类型的文件是不行的，因为浏览器不允许我们直接点击下载，是点击预览，我们在这里分享下各自的方法。
目录：
一、下载png,jpg等常见问题的方法
方法一:（ jpg png等）
方法二：（word(docx) excel(xlsx) ppt jpg png等）
二、下载pdf的方法（）
***在说具体方法之前，先解决一个问题，就是使用下面的方法：点击下载pdf却是打开预览的问题 （mock.js，如果页面中使用了mock.js一定会出现这个问题，因为我们的打开页面请求被拦截了，解决办法，把页面引入的mock去掉），下面是我项目中引入的mock,必须注释才能解决这个问题
方法一：pdf
方法二：pdf,xlsx等各种格式
一、下载png,jpg等常见问题的方法
方法一:（ jpg png等）
const link = document.createElement('a')
link.style.display = 'none'
link.href = url //（放你的路径）
document.body.appendChild(link)
link.click()
document.body.removeChild(link)方法二：（word(docx) excel(xlsx) ppt jpg png等）
/**
*下载或导出文件
* @param blob ：返回数据的blob对象
* @param tagFileName ：下载后文件名标记
* @param fileType ：文件类 word(docx) excel(xlsx) ppt等
*/
const saveFileToBlob = (blob, tagFileName, fileType) => {
// if (fileType) {
// console.warn('未传入文件类型,例如文件类 word(docx) excel(xlsx) ppt jpg png等')
// }
// if (isBlob(blob)) {
var downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob) //创建下载的链接
downloadElement.href = href
downloadElement.download = tagFileName + '.' + fileType //下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
window.URL.revokeObjectURL(href) //释放掉blob对象
// } else {
// console.warn('不是blob对象类型的参数,可选择saveFileToBase64(Base64对象,文件类型)或saveFileToLink(文件链接,文件名,文件类型,进度回调方法)')
// }
}
二、下载pdf的方法（）
***在说具体方法之前，先解决一个问题，就是使用下面的方法：点击下载pdf却是打开预览的问题 （mock.js，如果页面中使用了mock.js一定会出现这个问题，因为我们的打开页面请求被拦截了，解决办法，把页面引入的mock去掉），下面是我项目中引入的mock,必须注释才能解决这个问题
方法一：pdf
调用：
let src = '你的pdf路径'
downloadFile(src,'333')//地址，你的文件名 /**
* 下载文件，支持pdf,word等格式
* */
const downloadFile = (data, fileName ) => {
if (!data) {
return;
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName + '.pdf');
document.body.appendChild(link);
link.click();
}方法二：pdf,xlsx等各种格式
//调用
saveFileToLink(url,'555','pdf') //地址，文件名，文件类型 /**
* 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题
* @param url ：文件链接
* @param fileName ：文件名;
* @param type ：文件类型;
* @param fn ：进度回调方法;
*/
const saveFileToLink = (url, fileName, type, fn) => {
if (!CheckUrl(url)) {
throw new Error('传入参数不合法,不是标准的文件链接')
} else {
var xhr = new XMLHttpRequest()
// url = url.includes('https:') ? url.replace('https:', '') : url.replace('http:', '')//资源路径动态获取请求的方式HTTPS或HTTP
// console.log(url)
xhr.open('get', url, true)
xhr.setRequestHeader('Content-Type', `application/${type}`)
xhr.setRequestHeader('If-Modified-Since', '0') //解决缓存问题,每次请求都去请求服务器获取最新数据
xhr.responseType = 'blob'
xhr.onprogress = function(e) { //文件下载进度
if (fn && typeof fn === 'function') {
fn(e)//监听文件下载进度;
}
},
xhr.onload = function() {
if (this.status == 200) {
//接受二进制文件流
var blob = this.response
saveFileToBlob(blob, fileName, type)
}
},
xhr.send()
}
} /**
*下载或导出文件
* @param blob ：返回数据的blob对象
* @param tagFileName ：下载后文件名标记
* @param fileType ：文件类 word(docx) excel(xlsx) ppt等
*/
const saveFileToBlob = (blob, tagFileName, fileType) => {
// if (fileType) {
// console.warn('未传入文件类型,例如文件类 word(docx) excel(xlsx) ppt jpg png等')
// }
// if (isBlob(blob)) {
var downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob) //创建下载的链接
downloadElement.href = href
downloadElement.download = tagFileName + '.' + fileType //下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
window.URL.revokeObjectURL(href) //释放掉blob对象
// } else {
// console.warn('不是blob对象类型的参数,可选择saveFileToBase64(Base64对象,文件类型)或saveFileToLink(文件链接,文件名,文件类型,进度回调方法)')
// }
} /**
* 校验是否url链接
* @param url ：url链接
* @returns {Bool}：是否url链接
*/
const CheckUrl = (url) => {
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
return reg.test(url)
}