Vue 实现文件下载_vue.js文件下载

一、下载file-saver

npm i file-saver

二、封装download.js

// download.js
// 导入
import { saveAs as FileSaver } from 'file-saver'
// 使用
function download(URL,fileName){
	// 在方法内使用该代码片段
	const oReq = new XMLHttpRequest()
	oReq.open('GET', URL, true)// URL 为下载的URL地址
	oReq.responseType = 'blob'
	oReq.onload = function() {
	  const file = new Blob([oReq.response], {
	    type: 'blob'
	  })
	  FileSaver.saveAs(file, fileName) // fileName为文件名
	}
	oReq.send()
}
 
export default download

三、在main.js中注册

import download from "./components/download.js";
 
Vue.prototype.$download = download;

 四、使用

//url:文件地址，例如：https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg
//name:文件名，例如：2109250006343S5-0-lp.jpg
this.$download(url, name)

备注：成功的下载，不会出现任何文件下载下来都是2KB的情况