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

易21992024-08-03 19:22

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

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 的代码如下

<button @click="uploadAndFillData" enctype="multipart/form-data">上传并回填数据</button>

发票号码: {{ formData.number }}

开票日期: {{ formData.date }}

总金额: {{ formData.totalAmount }}

备注: {{ formData.note }}

</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中，字段名为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，点击按钮上传并解析文件，最终结果如下