vue根据URL下载文件并重命名

介绍

最近跟后端调试接口时上传附件（包含img、xlsx）等文件类型，需要在下载到本地时展示原名称。

实现方法

首先需要在vue的methods内定义方法

downloadByBlob(row){let {name,cdn,type}= row; //获取数据信息if(type==1){     //图片let image = new Image(); //创建图片image.setAttribute('crossOrigin', 'anonymous'); //配置图片属性image.src = cdnimage.onload = () => {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, image.width, image.height)canvas.toBlob((blob) => {let url = URL.createObjectURL(blob)this.download(url,name)// 用完释放URL对象URL.revokeObjectURL(url)})}}else if(type==4){ //xlsx文档类this.getBlob(cdn).then(blob=>{const link = document.createElement('a')const body = document.querySelector('body')link.href = window.URL.createObjectURL(blob)link.download = namelink.style.display = 'none'body.appendChild(link)link.click()body.removeChild(link)window.URL.revokeObjectURL(link.href)})}},

//清除download(href, name) {let eleLink = document.createElement('a')eleLink.download = nameeleLink.href = hrefeleLink.click()eleLink.remove()},

//下载getBlob(url) {return new Promise((resolve) => {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.responseType = 'blob'xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response)}}xhr.send()})}

 download(href, name) {let eleLink = document.createElement('a')eleLink.download = nameeleLink.href = hrefeleLink.click()eleLink.remove()}

这样我们就完成了前端下载图片文档的操作。

后话

希望对于大家的面试有所帮助，如果你还有想补充或者说明的欢迎留言评论。

vue根据URL下载文件并重命名相关推荐

php下载文件并重命名,通过php下载文件并重命名
通过php下载文件并重命名 $filename = dirname(__FILE__) . '/oldfilename.jpg'; $out_filename = 'newfilename.jpg'; ...
Vue 通过url下载文件并对下载的文件更名
Vue 通过url下载文件并对下载的文件更名 HTML如下: <div @click="downloadFile(url,name)">点击下载</div> ...
Vue 通过url下载文件并修改文件名称
封装一个通用的方法在需要使用的页面引入 /*** 通过url下载文件并对下载的文件更名* @param {*} url * @param {*} filename */ export const d ...
Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
vue下载文件并重命名
vue的项目,需要做一个文件上传下载的功能.上传是OK的,然鹅因为上传到minio的时候,使用了随机数命名,导致文件名称就变成了一大串字符.被客户驳回来了.那好吧,就加一个重命名功能好了. 不过这个项 ...
微信小程序下载文件并重命名，并在微信可以打开、保存并转发给好友
在开发中,遇到一个需求,需要预览.下载并保存PDF文件,实现文件的重命名,可以转发给微信好友开发代码如下 download() {// 判断文件目录是否存在, wx.env.USER_DATA_PA ...
Php7实现文件下载,PHP7 SFTP下载文件并重命名该下载文件
SFTP类 '',//sftp服务器地址 'port' => ,//sftp服务器端口 'username' => '', //sftp服务器用户名 'password' => '' ...
批量下载文件并重命名
num<文件数量+1 d中填写存储路径修改newName改变命名规则 import os import requestsnum = 1 while num < 170:url = 'ht ...
curl -O 下载文件 curl -o 下载文件并重命名
默认使用URL 的最后部分当作文件名 curl -O https://httpbin.org/image/png 红色框就是默认的下载路径 curl -o image.jpg https://http ...

vue根据URL下载文件并重命名

介绍

实现方法

后话

vue根据URL下载文件并重命名相关推荐

最新文章

热门文章