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

2024/10/24 4:40:01 来源：https://blog.csdn.net/weixin_43866613/article/details/140867170 浏览: 次关键词：PDF发票解析并将信息回填到前端（2）前端页面

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

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><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>