一、下载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 },
标签:canvas,预览,前端,ajax,var,pdf,image,图片 From: https://www.cnblogs.com/haiyang-/p/16918349.html