构建vue单页面应用

最新推荐文章于 2025-06-02 09:03:51 发布

原创最新推荐文章于 2025-06-02 09:03:51 发布 · 485 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于Vue的单页面应用模板，演示了如何使用Axios进行文件下载，并展示了如何配置响应类型为blob以处理Excel文件。此外，还提供了一个格式化数字的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue单页面应用如下，是一个基本应用模板，适合开发app + H5应用的项目，推荐引用vant组件进行h5开发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单页面应用</title>
	</head>
	<style type="text/css">
		[v-cloak] {
			display: none !important;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			123
		</div>
	</body>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
	<script src="./js/moment.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {},
			created() {
				//文件下载
				console.log(123)
				axios.get('http://192.168.0.1：8080/export1?id=1', {
					'responseType': 'blob'
				}).then(
					function(response) {
						console.log(response)
						if (response.status == 200) {
							console.log(response.status)
							let a = document.createElement('a');
							let blob = new Blob([response.data], {
								type: "application/vnd.ms-excel"
							});
							let objectUrl = URL.createObjectURL(blob);
							a.setAttribute("href", objectUrl);
							a.setAttribute("download", '电子表格.xlsx');
							a.click();
						} else {
							console.log(response.status)
						}

					}
				)
			},
			methods: {

				//保留两位小数
				formatMoney: function(value, type) {
					if (/[^0-9\.]/.test(value))
						return "0";
					if (value == null || value == "")
						return "0";
					value = value.toString().replace(/^(\d*)$/, "$1.");
					value = (value + "00").replace(/(\d*\.\d\d)\d*/, "$1");
					value = value.replace(".", ",");
					var re = /(\d)(\d{3},)/;
					while (re.test(value))
						value = value.replace(re, "$1,$2");
					value = value.replace(/,(\d\d)$/, ".$1");
					if (type == 0) { // 不带小数位(默认是有小数位)
						var a = value.split(".");
						if (a[1] == "00") {
							value = a[0];
						}
					}
					return value;
				}
			}
		})
	</script>
</html>

不会，我可以学；落后，我可以追赶；跌倒，我可以站起来！我一定行！