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

news2024/11/23 14:09:32

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

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中，字段名为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>