本人前端基础薄弱,此处的前端仅仅是一个练习展示
1. 创建一个前端项目
-
打开终端使用以下命令创建一个基于webpack模板的新项目
vue init webpack my-project
输入命令之后一直点击enter知道项目创建完成即可
-
进入项目,安装并运行
$ cd my-project // 进入项目 $ npm install // 安装 $ npm run dev // 运行项目
-
成功执行以上命令之后访问
http://localhost:8080/
,输出结果如下图
-
使用VSCode打开项目,下面是项目的目录结构。
在src,components下创建PDF.vue 文件
-
PDF.vue 的代码如下
<template><button @click="uploadAndFillData" enctype="multipart/form-data">上传并回填数据</button></template> <script> import axios from 'axios'; export default { data() { return { selectedFile: null, formData: null, // 用于存储从后端返回的数据 }; }, methods: { onFileChange(e) { this.selectedFile = e.target.files[0]; },发票号码: {{ formData.number }}
开票日期: {{ formData.date }}
总金额: {{ formData.totalAmount }}
备注: {{ formData.note }}
uploadAndFillData() { // 检查文件是否已经选择 if (!this.selectedFile) { alert("请先选择一个文件!"); return; } const formData = new FormData(); // 创建一个FormData 对象,用于构建将要发送的数据 formData.append("file", this.selectedFile); // 将文件添加到FormData中,字段名为file axios.post('http://localhost:8080/invoice/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { this.formData = response.data; // 将解析后的数据保存到formData中 }).catch((error) => { console.error("Error uploading file:", error); alert("上传文件时发生错误!"); }); },
},
};
</script> -
在 router 目录下的 index.js 中引入组件并定义组件规则
-
在终端使用以下命令运行该项目
npm run dev
-
访问地址
localhost://8081/#/pdf
,点击按钮上传并解析文件,最终结果如下