前端下载url文件(解决PDF, 图片自动在浏览器打开)

news2024/11/23 18:52:28

常规下载方法：

/* 方法1 */
window.open(下载url地址, '_blank')

/* 方法2 */
const link = document.createElement("a");
link.download = true;
link.href = 下载url地址;
link.click();
document.body.removeChild(link);

pdf文件默认在浏览器中展示解决方案：

一、更改浏览器设置
在这里插入图片描述
二、通过canvas下载图片

    let image = new Image()
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous')
    image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') //得到图片的base64编码数据

        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '图片' // 设置图片名称
        a.href = 文件url地址// 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
    }
    image.src = row.fileUrl

三、通用解决方案（这种主要是让浏览器识别到这个文件的type不是application/pdf，这样浏览器就不会自动在浏览器中打开该文件了）

const link = document.createElement("a");
link.download = /* 文件名 */;
link.href = `${文件URL}?response-content-type=application/octet-stream`;
link.click();
document.body.removeChild(link);