vue 实现文件下载(从后台请求的数据)(包括下载图片、pdf、word等文件格式)

news/2024/7/9 23:39:49 标签: vue, 文件下载

下载最简单的方法就是用a链接实现,然后加一个download属性。但是有一个问题,从后台请求回的接口,对于图片和pdf及svg都不能实现下载功能,也就是download没有起作用。所以下面的方法就是解决这个问题的。

<a @click="downloadFile(file.name, file.url)" >下载</a>

/* 第一个参数是文件的名字,第二个参数是文件的路径*/

downloadFile(fileName, data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
    }

很简单,其实主要是把url转为[blob]文件格式

如果可以的话也可以直接让后端返回文件流格式的路径,也就不用自己再转换了,直接

<a :href="item.src" :download="item.name"/> 

让后端返回[blob]文件格式,需要传递 responseType: ‘blob’

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,
        method: 'post',
        data: config.data,
        responseType: 'blob'
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}

参考文章:https://blog.csdn.net/ying940718/article/details/98500667


http://www.niftyadmin.cn/n/951589.html

相关文章

vue 在浏览器顶部显示进度条

主要借助于 NProgress 插件 NProgress是页面跳转是出现在浏览器顶部的进度条 官网&#xff1a;http://ricostacruz.com/nprogress/ github&#xff1a;https://github.com/rstacruz/nprogress 安装&#xff1a; $ npm install --save nprogress 或者 $ yarn add nprogress 使用…

Git的使用--如何将本地项目上传到Github(两种简单、方便的方法)

将本地项目上传到Github&#xff08;两种简单、方便的方法&#xff09; 一、第一种方法&#xff1a; 首先你需要一个github账号&#xff0c;所有还没有的话先去注册吧&#xff01; https://github.com/ 我们使用git需要先安装git工具&#xff0c;这里给出下载地址&#xff…

Vue2.0 v-for 中 :key 到底有什么用?

网上有很多&#xff0c;我也看了很多&#xff0c;下面是我看到的最容易理解的也是我最认同的解释&#xff0c;所以就记录一下喽 要解释key的作用&#xff0c;不得不先介绍一下虚拟DOM的Diff算法了。 我们知道&#xff0c;vue和react都实现了一套虚拟DOM&#xff0c;使我们可以…

vue 移动端适配

这里我写一下我自己用的vue 移动端适配 &#xff0c;可能跟别人的不一样。但是效果是一样的。 我是安装 amfe-flexible npm i -S amfe-flexible安装px2rem&#xff0c;使得我们在开发中不需要自己手动计算&#xff0c;照常写px npm install px2rem-loader --save-dev在build目录…

element Table 展开行功能 (设置点击行可展开功能)

element Table 展开行功能 官方使用&#xff1a; 通过设置 type"expand" 和 Scoped slot 可以开启展开行功能&#xff0c;el-table-column 的模板会被渲染成为展开行的内容&#xff0c;展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。 但这种设置&…

OpenLayers 系列学习(一)

简单介绍 文章仅为学习笔记&#xff0c;本人也是OpenLayers小白&#xff0c;如有错误&#xff0c;欢迎指正 官网地址&#xff1a;https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addLayer OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2…

如何使用github和git进行团队合作开发(队友和owner的仓库连接)

折腾了两天终于搞懂了一个团队开发一个项目&#xff0c;在github和git下该如何操作&#xff0c;本文就简单总结一下我的过程吧&#xff0c;希望对大家有帮助。 1.首先确定一个项目拥有者&#xff0c;即你们一个团队的项目都上传到他的github下&#xff0c;这个owner需要做几件…

微信小程序使用base64字体图标 (生成字体图标+将字体图标转为base64格式)

问题&#xff1a; 1.微信小程序不能随意使用网络资源&#xff0c;如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片 下面就介绍一下如何制作base64字体图标。 简易方式&#xff1a; 通过两个在线工具&#xf…