vue项目点击按钮下载图片

最新推荐文章于 2024-07-13 11:45:14 发布

weixin_47860175

最新推荐文章于 2024-07-13 11:45:14 发布

阅读量359

点赞数

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/weixin_47860175/article/details/120328285

版权

本文介绍如何在Vue.js项目中实现点击按钮下载图片的功能。通过创建<a>和<iframe>标签，设置属性和监听点击事件，实现图片文件的下载。示例代码包括创建下载按钮和触发下载的方法。

摘要由CSDN通过智能技术生成

<el-button slot="reference" icon="el-icon-download" type="primary" @click="downloadCert">下载</el-button>

downloadCert() { // 会议纪要下载

//创建<iframe> 标签

// let elemIF2 = document.createElement('iframe');

// //elemIF2.src = 'http://172.31.10.157:8089/corehrsystemproject/downloadFileInfo?fileFun=hrcinfo&fileId=' + workTitleAnnex

// elemIF2.src='https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80';

// elemIF2.style.display = 'none';

// document.body.appendChild(elemIF2);

// console.log("下载成功",elemIF2);

//创建a标签

var elemIF2 = document.createElement('a')

elemIF2.href = './a.zip' //路径为 /项目/public/

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_47860175

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue实现点击按钮下载文件功能

10-16

在Vue.js框架中实现点击按钮下载文件的功能，可以通过结合HTML的`<a>`标签和Vue.js的事件绑定机制来实现。...同时，本文也提供了一定的参考借鉴价值，尤其适合需要在Vue项目中实现文件下载功能的开发人员。

Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式

热门推荐

lhz_19的博客

04-27

1万+

前段时间在项目中遇到文件需要下载，直接拿出了之前封装的下载指令，在用的时候发现在下载jpg、txt文件时，并不会直接下载，而是会在浏览器中打开文件，即使给a标签添加了download 属性，也无济于事。我先把之前封装的指令贴出来吧，如果下载文件类型只是Exact、Word、Pdf格式的可以直接拿着用，如果有其他文件类型需求的，可以继续往文章下面看支持Exact、Word、Pdf格式下载 l...

参与评论您还未登录，请先登录后发表或查看评论

vue 点击按钮下载图片、文件

zl的博客

07-07

1631

vue 点击按钮下载图片、文件

vue中下载图片功能：

Change!

07-13

335

点击按钮-下载图片：

vue中实现点击下载图片

xiaokangna的博客

04-27

5423

以上代码通过fetch获取图片并转化为blob类型，然后利用URL.createObjectURL创建下载链接，通过创建的< a >标签的 click() 方法来实现下载，最后移除新建的 < a > 标签和已经使用过的 URL 对象。Vue中实现点击下载图片的方法可以使用HTML5中的< a >标签的 download 属性或者通过JS来实现。

在vue中设置图片下载到本地

weixin_44424820的博客

06-11

4848

1、Image对象是JS中的内置对象，它代表嵌入的图像。使用new Image()来创建一个image对象，利用onload事件解决图片加载慢的问题。crossOrigin是image对象的一个属性值，指定CORS的访问设置，anonymous表示匿名访问，可以用来解决跨域问题。它本身就是一个画布，可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。2.3使用drawImage方法绘制。2.2 决定二维还是三维图像。是一个可以使用脚本 (通常为。

vue 生成海报，解决跨域问题，下载图片到本地

hflxia的博客

09-09

3739

// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...

vue前端实现图片下载，实现点击按钮弹出本地窗口，选择自定义保存路径

m0_71585401的博客

06-13

6071

vue前端实现图片下载，实现点击按钮弹出本地窗口，选择自定义保存路径

vue 一键点击下载对应图片

laoyaoshilaoyao的博客

07-14

1882

下载图片

vue项目中应用ueditor自定义上传按钮功能

08-27

Vue项目中应用ueditor自定义上传按钮功能本文主要介绍了Vue项目中应用ueditor自定义上传按钮功能，通过以Vue-cli生成的项目为例，讲解了Vue项目中使用ueditor的方法。一、ueditor的基本使用 ueditor是一款功能...

vue悬浮可拖拽悬浮按钮的实例代码

10-16

// 点击按钮事件 handleIcons(router){ console.log('router', router) this.$router.push(router) } } } ``` #### CSS样式使用Sass编写样式，为悬浮按钮设置样式，并定义 `float-icon-item` 的布局、位置...

Vue触发input选取文件点击事件操作

10-14

在上面的代码中，我们使用了Vue的`@click`指令将`choiceImg`方法绑定到按钮的点击事件，这样当用户点击按钮时，就会触发`choiceImg`方法。同时，我们通过`ref`属性为input元素设置了引用，以便在JavaScript中能够...

详解Vue项目中实现锚点定位

10-17

具体来说，在Vue项目中，若要在点击导航按钮时定位到页面的特定位置，则需要借助Vue的响应式数据和方法来实现。在给定文件内容中，提到了一种使用`scrollIntoView()`方法来实现锚点定位的解决方案。`...

vue 下载图片

CvLebron的博客

03-08

1833

Vue中实现点击下载图片的方法可以使用HTML5中的< a >标签的 download 属性或者通过JS来实现。

vue3点击下载图片，以及文件流的下载

weixin_70243424的博客

05-28

3272

【代码】vue3点击下载图片，以及文件流的下载。

Vue 复制、下载图片和文字

鹤渺的星球

12-22

2426

实现图片和文本的复制和下载方法应该挺多，而后者如果想要一张图片和文字说明都被下载，那肯定是在一起，下载成一张图片的样子，所以后者的实现方法，我暂时只想到一种：画canvas然后下载。都是需要浏览器的Clipboard 支持，大部分都支持。

Vue 图片下载功能

wangyadong1314的博客

07-14

1168

使用Fetch API发送GET请求到你的URL地址，并设置请求头的。在链式调用中，首先将响应转换为Blob对象。字段在Fetch API中无效，你需要将。又做了一个图片下载的功能，下面是代码。模拟点击a标签，从而触发文件下载。将Blob数据转换为URL链接。释放URL对象，避免内存泄漏。作为查询参数拼接在URL中。创建一个a标签，并设置链接(将a标签添加到文档中。，以确保在请求发送后。

react或vue点击按钮实现图片/文件下载（a链接）

weixin_45960031的博客

12-12

609

react或vue点击按钮实现图片/文件下载（a链接）

VUE+ElementUI下载文件的几种方式

weixin_60457220的博客

12-27

6040

【代码】VUE+ElementUI下载文件。

vue+elementui 点击按钮上传图片