Prefacio:
En nuestro proyecto, es muy conveniente descargar archivos png, jpg, generar dinámicamente una etiqueta a, asignarle una ruta y hacer clic dinámicamente para lograr esta función, pero pdf, word y otros tipos de archivos no están disponibles debido a la navegación El navegador no nos permite hacer clic para descargar directamente, pero hacer clic para obtener una vista previa, compartimos los métodos respectivos aquí.
Tabla de contenido:
1. Cómo descargar png, jpg y otros problemas comunes
Método 2: (palabra (docx) excel (xlsx) ppt jpg png, etc.)
Método 2: pdf, xlsx y otros formatos
1. Cómo descargar png, jpg y otros problemas comunes
Método 1: (jpg, png, etc.)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url //（放你的路径）
document.body.appendChild(link)
link.click()
document.body.removeChild(link)Método 2: (palabra (docx) excel (xlsx) ppt jpg png, etc.)
/**
*下载或导出文件
* @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(文件链接,文件名,文件类型,进度回调方法)')
// }
}
2. Cómo descargar pdf ()
*** Antes de hablar sobre el método específico, primero resuelva un problema, que es usar el siguiente método: Haga clic para descargar el pdf pero abra el problema de vista previa (mock.js, si se usa mock.js en la página, este problema definitivamente ocurrirá, porque nos interceptaron la solicitud para abrir la página, la solución es quitar el mock introducido en la página ), el siguiente es el mock introducido en mi proyecto , el cual debe ser comentado para solucionar este problema
Método uno: 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();
}Método 2: pdf, xlsx y otros formatos
//调用
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)
}