vue打包的项目启动服务器下载

直接上代码

  • 这里注意axios里的url路径
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>文件分享</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-card shadow="hover">
				<span style="margin-right: 10px;">文件名字：<el-input style="width:200px;" v-model="input"
						placeholder="请输入内容"></el-input></span>
				<el-button type="primary" @click="down" :disabled="disabled">下载文件</el-button>
			</el-card>
		</div>
		<!-- js -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data() {
					return {
						url: "",
						input: "hotelmanagers",
						disabled:false,
					}
				},
				methods: {
					// 文件下载
					down() {
						this.disabled = true;
						axios({
							method: "GET",
							url: "./hotelmanagers.tar.gz",
							responseType: 'blob'
						}).then(res => {
							let blob = new Blob([res.data], {
								type: res.data.type
							});
							this.url = window.URL.createObjectURL(blob);
							const a = document.createElement('a'); //创建a标签
							a.setAttribute('download', `${this.input}.tar.gz`); // 名字
							a.setAttribute('href', this.url); // href链接
							a.click(); // 自执行点击事件
							document.body.appendChild(a); //插入body里
							document.body.removeChild(a); //从body删除	
							this.disabled = false;
						}).catch(res => {
							this.$message.error("等待刷新，重新下载。")
							setTimeout(()=>{
								location.reload();
							},800)
						})
					}
				}
			})
		</script>
	</body>
</html>
posted @ 2021-03-09 13:40  小泽沐优声  阅读(62)  评论(0)  编辑  收藏  举报