PDF发票解析并将信息回填到前端（2）前端页面

本人前端基础薄弱，此处的前端仅仅是一个练习展示

1. 创建一个前端项目

1. 打开终端使用以下命令创建一个基于webpack模板的新项目

vue init webpack my-project

输入命令之后一直点击enter知道项目创建完成即可

2. 进入项目，安装并运行

   $ cd my-project  // 进入项目
   $ npm install  // 安装
   $ npm run dev // 运行项目

3. 成功执行以上命令之后访问 http://localhost:8080/，输出结果如下图
   
4. 使用VSCode打开项目，下面是项目的目录结构。
   在src，components下创建PDF.vue 文件
   
5. PDF.vue 的代码如下

<template><div><input type="file" @change="onFileChange" accept="application/pdf" /><button @click="uploadAndFillData" enctype="multipart/form-data">上传并回填数据</button><!-- 表单或区域来显示回填的数据 --><div v-if="formData"><!-- 使用formData来显示或更新UI --><!-- 如果数据是只读的，可以这样显示 --><div><p><strong>发票号码:</strong> {{ formData.number }}</p><p><strong>开票日期:</strong> {{ formData.date }}</p><p><strong>总金额:</strong> {{ formData.totalAmount }}</p><p><strong>备注:</strong> {{ formData.note }}</p></div></div></div>
</template><script>
import axios from 'axios';  
export default {data() {return {selectedFile: null,formData: null, // 用于存储从后端返回的数据};},methods: {onFileChange(e) {this.selectedFile = e.target.files[0];},uploadAndFillData() {// 检查文件是否已经选择if (!this.selectedFile) {alert("请先选择一个文件！");return;}const formData = new FormData(); // 创建一个FormData 对象，用于构建将要发送的数据formData.append("file", this.selectedFile); // 将文件添加到FormData中，字段名为fileaxios.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>

6. 在 router 目录下的 index.js 中引入组件并定义组件规则
   
   
   
7. 在终端使用以下命令运行该项目

npm run dev

8. 访问地址localhost://8081/#/pdf，点击按钮上传并解析文件，最终结果如下