vueダウンロードファイルはトークンをもたらすことができます

ネイティブajaxライティング

function downloadFile(params, name) {
    
    
	// token
	const token = localStorage.getItem('authorization')
	const req = new XMLHttpRequest()
	// 选择性传id
	req.open('get', '/url/file/download/' + params.id, true)
	req.responseType = 'blob'
	// 选择性添加Authorization
	req.setRequestHeader('Authorization', token)
	req.onload = function() {
    
    
		const blob = req.response
		// 获取文件名包括后缀名,手动传入文件名应该包括后缀名,例如:name = 'qq.xls'
		const fileName = name || (req.response.headers['content-disposition'] ?	decodeURI(req.response.headers['content-disposition'].split('=')[1]) : 'response.json')
		const blobUrl = URL.createObjectURL(new Blob([blob]))
		const a = document.createElement('a');
		a.download = fileName;
		a.href = blobUrl;
		document.body.appendChild(a);
		a.click();
		a.remove();
	}
	req.send()
}

または

// 有axios封装的文件,可以这样写
export function downloadExcel() {
    
    
  return service({
    
    
    method: 'get',
    url: '/url/file/download',
    responseType: 'blob'
  }).then(response => {
    
    
    fileHandle(response)
  })
}

function fileHandle(response, name) {
    
    
  const blob = response.data
  const fileName = name || (response.headers['content-disposition'] ? decodeURI(response.headers['content-disposition'].split('=')[1]) : 'response.json')
  const blobUrl = window.URL.createObjectURL(new Blob([blob]))
  const a = document.createElement('a')
  a.download = fileName
  a.href = blobUrl
  document.body.appendChild(a)
  a.click()
  a.remove()
}

おすすめ

転載: blog.csdn.net/weixin_43908123/article/details/115367079