前端下载网络路径的图片及PDF

PDF

重点是在a标签上面添加?response-content-type=application/octet-stream

 第一种方法（这种方法设置的文件名好像不生效）

const fileName = '我的' + '.pdf'
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = 'https://xxxxxx/test/bcdd7d41-6533-4f7c-8364-94feb5ea472f.pdf?response-content-type=application/octet-stream'
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)

第二种方法

let xhr = new XMLHttpRequest()
xhr.open('get', row.fileUrl, true)//第二个参数是网络路径
xhr.setRequestHeader('Content-Type', `application/.pdf`)
xhr.responseType = 'blob'
xhr.onload = function () {
    if (this.status == 200) {
        //接受二进制文件流
        var blob = this.response
        // this.downloadExportFile(blob, 'sdf', '.pdf')
        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 = 'xxx.pdf' //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        if (typeof blob != 'string') {
            window.URL.revokeObjectURL(href) //释放掉blob对象
        }
    }
}
xhr.send()

 图片

let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = 'https://xxxxx/test/0a7cdbcd-8b44-4c42-885d-c9df0d948c8d.jpg'
image.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        let eleLink = document.createElement('a')
        eleLink.download = 'div'
        eleLink.href = url
        eleLink.click()
        eleLink.remove()
        download(url, 'img')
        // 用完释放URL对象
        URL.revokeObjectURL(url)
    })
}