vue3 后台返回的图片链接如何查看与下载

1.查看

<a-table:columns="applyColumns":data-source="uploadFile":pagination="false"><template #bodyCell="{ column,record }"><template v-if="column.key === 'operation'"><a :href="record.enclosure" target="_blank">查看</a><a-divider type="vertical" /><a @click="handleDownload(record.enclosure,record.name)">下载</a></template></template></a-table>

2.下载

const handleDownload = (imgsrc, name) => {//下载图片地址和图片名let image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')image.onload = function () {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet 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 = name || 'photo' // 设置图片名称a.href = url // 将生成的URL设置为a.href属性a.dispatchEvent(event) // 触发a的单击事件}image.src = imgsrc};

vue3 后台返回的图片链接如何查看与下载相关推荐

vue 下载后台返回的图片
HTML: //businessLicenceFileList[0].url为后台返回的图片地址或pdf地址 <div class="download-img" @click ...
超囧的图片链接批量获取和下载
以前在windows下经常去一些壁纸网站,或者是美女的QQ相册,又或者是一个激情美女图片网站下载图片,经常需要点击右键然后"另存为",要是遇见经典套图,这种重复的操作肯定会让你失去 ...
POI动态导出Excel，后台返回文件流，前端responseType格式下载
针对各个表的数据导出,实现的代码往往相似,出于这个目的,开启自己代码简略之旅.本文是针对.xls的excel文件. 1.思路描述 ①.确定各个模板的.xls文件格式 ②.定义模板的存在的参数,如第一行 ...
接收后台返回的文件流或 base64 后下载打印 pdf 功能
后台正常返回的流 //dataResult.data是后台返回的流 let pdfUrl = window.URL.createObjectURL(new Blob([dataResult.data] ...
前台获取后台返回的图片并显示
后台: String base64str=new String(log.getRequest_imgdata());//log为实体括号里面是图像的get方法返回为Byte[]型 String n ...
当后台返回Excel文件流，前端怎么下载
首先根据后台给的导出接口地址:/back/supervision/exportXls 前端: api >index.js文件中接口 export function superExportXls( ...
【Django】自定义存储后端返回完整图片的URL链接
我们在Django存储图片的时候,并不是直接存储图片,而是存储图片的唯一标识,再通过标识去获取图片,例如下面的模型类有一个image字段,字段类型是ImageField class SKUImage( ...
后台返回的base64的图片格式,前端如何转为普通的图片格式
在上一篇的博客当中,写了前端如何将普通的图片格式转为base64的图片,今天开发的时候遇到了后台返回的图片格式是base64的,我这边需要把base64的图片格式转为普通的,搜了一下js的方法,感觉很 ...
vue3后台管理项目，后端返回动态路由
文章目录前言一.项目地址二.项目思路描述三.操作步骤 3.1拦截路由静态路由后端动态路由 3.2登录表单验证 3.3permission.js文件 3.4取后台路由并处理 3.5 layo ...

vue3 后台返回的图片链接如何查看与下载

vue3 后台返回的图片链接如何查看与下载相关推荐

最新文章

热门文章