vue开发方式在如今国内的前端中占据着极为重要的地位，互联网中使用vue开发的各类应用也越来越多。

本篇文章就来介绍在vue框中如何下载文件，如图片、PDF等。

使用vue下载文件前，先来了解下axios插件。

    Axios：基于 promise 的网络请求库，可以用于浏览器和 node.js。

了解了Axios有什么作用后，接下来就来详细了解如何使用axios完成下载功能。

一、安装axios插件

npm install axios
cnpm install axios //taobao源

二、使用axios下载文件

import axios from 'axios'
const downloadPDF = async (pdfUrl : string) => {
	const response = await axios({
		url: '文件链接地址',
		method: 'GET',
		responseType: 'blob', // 必须指定为blob类型才能下载
	});
	const url = window.URL.createObjectURL(new Blob([response.data]));
	const link = document.createElement('a');
	link.href = url;
	link.setAttribute('download', 'file.pdf');
	document.body.appendChild(link);
	link.click();
}

三、跨域问题处理

    axios的跨域使用vue跨域处理方式即可。常见vue跨域配置如下。

    vue.config.js里配置

// 跨域的代理中转服务器服务
proxy: {
  "/api":{   // /vue代理target
	target: 'http://域名',      // 后端接口的根目录
	// secure: true,           // 如果是 https ,需要开启这个选项，http为false
	changeOrigin: true,        // 是否跨域
	pathRewrite: {            // 是否重写路径，看代理前端路径是否与后端路径一致
	'^/api':'', //将所有含/api路径的，去掉/api转发给服务器                 
	}
  }
}

注：若请求后台返回的就是文件流，则方法中不需要axios再次请求文件地址转换成文件流方式。