vue实现下载pdf文件
1.前端实现下载pdf文件更多的是新开一个标签页来打开pdf文件,然后在点击下载,这篇文章是分享的是点击直接下载,无需新开标签页2.这里是pdf文件已经由后台生成并且传到了阿里云,所以这边直接传入线上地址即可,其他小伙伴没有线上地址的可以先实现阿里云上传或者其他方法获取到线上地址在调用。this.fileLinkToStreamDownload(url)//直接传入要下载的pdf文件的线上地址fi
·
1.前端实现下载pdf文件更多的是新开一个标签页来打开pdf文件,然后在点击下载,这篇文章是分享的
是点击直接下载,无需新开标签页
2.这里是pdf文件已经由后台生成并且传到了阿里云,所以这边直接传入线上地址即可,其他小伙伴没有线上地址的
可以先实现阿里云上传或者其他方法获取到线上地址在调用。
3.pdf的预览可以直接用a标签或者window.open来实现
this.fileLinkToStreamDownload(url) //直接传入要下载的pdf文件的线上地址
fileLinkToStreamDownload(url) {
let fileName = this.getDay()
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
if (!reg.test(url)) {
throw new Error('传入参数不合法,不是标准的文件链接')
} else {
let xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.setRequestHeader('Content-Type', `application/pdf`)
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+
//下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
if (typeof blob != 'string') {
window.URL.revokeObjectURL(href) //释放掉blob对象
}
},
getDay()方法:拿当前的时间戳拼接,保证文件名字的唯一性,避免重名
function getDay() {
let time = new Date(),
year = time.getFullYear(),
month = time.getMonth() + 1,
day = time.getDate(),
timeStem = time.getTime()
return `${year}/${month}/${day}/${timeStem}.jpg`
}
更多推荐
已为社区贡献2条内容
所有评论(0)