序文：
私たちのプロジェクトでは、png、jpgファイルをダウンロードし、タグを動的に生成し、それにパスを割り当て、動的にクリックしてこの機能を実現するのは非常に便利ですが、pdf、word、およびその他の種類のファイルは参照のために利用できませんブラウザでは、クリックして直接ダウンロードすることはできませんが、クリックしてプレビューする場合は、ここでそれぞれの方法を共有します。
目次：
1. png、jpg、その他の一般的な問題をダウンロードする方法
方法2：（word（docx）excel（xlsx）ppt jpg pngなど）
1. png、jpg、その他の一般的な問題をダウンロードする方法
方法1：（jpg、pngなど）
const link = document.createElement('a')
link.style.display = 'none'
link.href = url //（放你的路径）
document.body.appendChild(link)
link.click()
document.body.removeChild(link)方法2：（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(文件链接,文件名,文件类型,进度回调方法)')
// }
}
2. PDFのダウンロード方法（）
***特定の方法について話す前に、まず問題を解決します。それは次の方法を使用することです。クリックしてPDFをダウンロードしますが、プレビューの問題を開きます（mock.js、ページでmock.jsが使用されている場合、この問題ページを開くリクエストが傍受されたため、解決策はページで導入されたモックを削除することです）、以下は私のプロジェクトで導入されたモックです。この問題を解決するにはコメントする必要があります
方法1：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();
}方法2：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)
}