首页 > 其他分享 >前端下载图片或pdf而不是预览方法

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

时间:2022-11-23 15:15:25浏览次数:49  
标签:canvas 预览 前端 ajax var pdf image 图片

一、下载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

相关文章

  • 拥抱开源 第二版 电子书 pdf
    作者:[美]戈登•哈夫(GordonHaff)出版社:人民邮电出版社出品方:异步图书译者:X-lab开放实验室 关注公众号:红宸笑。回复:电子书即可  本书适合对开源软件感......
  • 拥抱开源 第二版 电子书 pdf
    作者:[美]戈登•哈夫(GordonHaff)出版社:人民邮电出版社出品方:异步图书译者:X-lab开放实验室 链接:拥抱开源第二版  ......
  • 前端项目通过‘URL 重写’部署在 IIS 中,访问 WebAPI 接口
    〇、前言在前端项目开发时,我们可以通过配置代理proxy来访问本地或者是远程接口,但是部署后代理就失效了。如果项目部署在IIS上,就没法去对应到指定接口,此时就需要IIS......
  • nginx禁止PDF文件直接打开,而是下载
    在nginx.conf文件中加入下面代码location/{if($request_filename~*^.*?\.(html|doc|pdf|zip|docx)$){add_headerContent-......
  • 关于新手在使用git过程中的基本问题--前端开发篇
    1.首先git是什么?git学名叫做分布式版本控制系统。它能做啥呢?想一想,你在写项目的时候,尤其是大型的协作项目,往往一个项目会经过很多次修改才上线,在这个过程中,你会写项目1.0......
  • nginx 部署前端项目
    前言nginx如何部署打包成为dist的前端项目。读者须知:nginx如何安装与使用PSdocker安装与使用​​​dockerpullnginx​​​​dockerrun--restart=on-failure:20-itd......
  • 前端项目中:需要注意的点
    (1)数组的拷贝浅拷贝:当数据为一维数组时,可以很好的开辟一块新的内存空间当数据为高维数组时,有协同修改的风险深拷贝:完全的开辟一块新的内存空间https://ww......
  • excel下载,JasperReports输出pdf
    ~~~java/***导出Excel报表*@return*/@RequestMapping("/exportBusinessReport")publicResultexportBusinessReport(HttpServletRequestrequest,HttpServletRespo......
  • 大前端html基础学习
    根目录相对路径:针对图片数量比较多的情况,新建一个文件夹,将所有图片放进去,imgs/cat.webp(1)/:下一级(2)a/b/c/cat.webp返回路径(向外找):从下一级html中找上级或上上级的图片,走......
  • 推荐几个好用的pdf转word好用的网站(OCR)
    迅捷PDF转换器在线转换,带OCR超级PDF需要微信登陆,似乎有上线,不过识别率还行......