前端下载图片或pdf而不是预览方法

一、下载pdf时

使用 a 链接的 download 方法

调用：this.downloadFile_2('文件名','url链接')

本地无法下载的话，可以试试放到线上

文件名要加 .pdf 后缀

//fileName是pdf名称 、filePath是pdf地址
downloadFile_2(fileName, filePath) { 
  var ajax = new XMLHttpRequest()
  ajax.open('GET', filePath, true)
  ajax.setRequestHeader('Cache-Control', 'no-cache')
  ajax.setRequestHeader('Access-Control-Allow-Origin', '*')
  ajax.responseType = 'blob'
  ajax.onload = (e) => {
    console.log(e)
    let res = e.target.response
    // let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据
    let blob = new Blob([res])
    let aLink = document.createElement('a')
    aLink.download = `${fileName}.pdf` // 下载文件的名字
    aLink.href = URL.createObjectURL(blob)
    aLink.click()
  }
  ajax.send()
},

二、下载图片

当下载图片路径，使用的是后台返回的路径且用的是ip访问时，常规的图片下载方法会当做图片预览处理。解决方案是，把图片路径转为base64，然后再进行下载即可。这里遇到一个问题就是跨域，

（设置貌似没有什么效果，只能打包后把前端代码放在后端的tomcat，就可以正常了）有的可以，有的不可以。分情况而定

 1 loadImg(row) {
 2       // 一定要设置为let，不然图片不显示
 3       const image = new Image();
 4       // 解决跨域问题
 5       image.setAttribute('crossOrigin', 'anonymous');
 6       image.src= this.baseResourceUrl + row.url;
 7       // image.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcms.hyqss.cn%2Fupload%2F2022%2F07%2F0.867544601144057.png&refer=http%3A%2F%2Fcms.hyqss.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660203999&t=5873008482a1f1cfb980b55de709a83f"
 8       // image.onload为异步加载
 9       image.onload = () => {
10         var canvas = document.createElement('canvas');
11         canvas.width = image.width;
12         canvas.height = image.height;
13         var context = canvas.getContext('2d');
14         context.drawImage(image, 0, 0, image.width, image.height);
15         var quality = 0.8;
16         // 这里的dataurl就是base64类型  
17         // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
18         const dataurl = canvas.toDataURL('image/jpeg', quality);
19 
20         var a = document.createElement("a"); // 生成一个a元素
21         var event = new MouseEvent("click"); // 创建一个单击事件
22         a.download = row.fileName || "photo"; // 设置图片名称
23         a.href = dataurl; // 将生成的URL设置为a.href属性
24         a.dispatchEvent(event); // 触发a的单击事件
25       }
26     },

程序员灯塔
转载请注明原文链接：前端下载图片或pdf而不是预览方法