浏览器左下角下载文件

曾经终败给现在 2022-12-21 10:53 127阅读 0赞

本次项目中需要实现以下效果 : 点击下载(也可以是文件或图片) , 在浏览器左下角下载  
![下载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]

###### 方法一 : 以 jquery 为例 ######

使用 a 链接的 download 属性既可做到 , download 属性规定被下载的超链接目标

<a href="https://www.jq22.com/jquery/jquery-3.4.1.zip" download="jquery">下载</a>

###### 方法二 : 取后端返回下载路径 ######

(1) 在基于 vue 的项目中下载依赖 **html2canvas**  
(2) vue 文件引入 **import html2canvas from ‘html2canvas’;**  
(3) template 此处在表格中使用 , 下载文件

![htmlBtn][]  
(3) methods 中使用

// this.$refs.** 要与 template 的 ref 属性对应
    downloadCertificateFile (row) { 
      html2canvas(this.$refs.downFile).then(canvas => { 
        let link = document.createElement("a");
        link.href = row.filePath; // 下载链接
        link.setAttribute("download", row.fileName);
        link.style.display = "none"; // a标签隐藏
        document.body.appendChild(link);
        link.click();
      });
    }

相信大家都能看懂 , 有什么问题可以评论~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9c384563536348eca13a7090cf7cf379.png
[htmlBtn]: /images/20221120/75838be997ce4ef885ab4ab220a843d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 idea打开项目时，文件左下角显示橙色J

天的积累都是为了更好的明天，加油！我是java程序员可以关注我一起学习哈！ 1，出现橙色原因：没有添加到maven 解决办法：找到项目的xml,如果最外层没有xml,...

小咪咪/ 2024年04月18日 17:56/ 0 赞/ 116 阅读

相关 Android View 从左下角放大出场

中心点更改为左下角： mGenderSelectorLinearLayout.setPivotX(0); mGenderSelectorLinearLa

超、凢脫俗/ 2024年02月19日 20:50/ 0 赞/ 75 阅读

相关 513.找树左下角的值

513.找树左下角的值题干描述解题思路递归递归三部曲 1. 确定递归函数的参数和返回值

拼搏现实的明天。/ 2023年10月16日 08:58/ 0 赞/ 17 阅读

相关 html实现网页左下角音乐播放器

html实现网页左下角音乐播放器效果图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

「爱情、让人受尽委屈。」/ 2023年10月04日 15:19/ 0 赞/ 79 阅读

相关浏览器左下角下载文件

本次项目中需要实现以下效果 : 点击下载(也可以是文件或图片) , 在浏览器左下角下载 ![下载][watermark_type_ZmFuZ3poZW5naGVpdGk_s

曾经终败给现在/ 2022年12月21日 10:53/ 0 赞/ 128 阅读

相关 513. 找树左下角的值

题目来源 [513. 找树左下角的值][513.] 题目描述 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

女爷i/ 2022年11月20日 02:59/ 0 赞/ 154 阅读

相关 Android 高德地图隐藏左下角Logo

使用高德Map通常很郁闷那个Logo，那么该如何隐藏掉呢？这里以Android 3D地图SDK V4.1.2 为例思路一：使用相对布局用一个View挡住(有点lo

ゞ浴缸里的玫瑰/ 2022年07月16日 13:08/ 0 赞/ 797 阅读

相关 Idea 类文件java 左下角出现红色小J字母

Idea 类文件java 左下角出现红色小J字母 2017-09-29 14:22:00 来源：[何新生(Daniel) 勇敢坚毅真正之才智乃刚毅之志向。 —

ゝ一世哀愁。/ 2022年04月21日 15:20/ 0 赞/ 255 阅读

相关 IDEA Java类文件左下角出现'J'标示

问题： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

ゝ一世哀愁。/ 2022年02月26日 10:33/ 0 赞/ 294 阅读

相关 513. 找树左下角的值

给定一个二叉树，在树的最后一行找到最左边的值。示例 1: 输入: 2 / \ 1 3

阳光穿透心脏的1/2处/ 2021年12月17日 08:21/ 0 赞/ 283 阅读