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`
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐