浏览器左下角下载文件

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

方法一 : 以 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 此处在表格中使用 , 下载文件

(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();
  });
}

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