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

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

1. 创建一个前端项目

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

    vue init webpack my-project

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

  1. 进入项目,安装并运行

    复制代码
    $ cd my-project  // 进入项目
    $ npm install  // 安装
    $ npm run dev // 运行项目
  1. 成功执行以上命令之后访问 http://localhost:8080/,输出结果如下图

  2. 使用VSCode打开项目,下面是项目的目录结构。
    在src,components下创建PDF.vue 文件

  3. PDF.vue 的代码如下

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

  4. 在 router 目录下的 index.js 中引入组件并定义组件规则


  5. 在终端使用以下命令运行该项目

    npm run dev

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

相关推荐
脑袋大大的24 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0134 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui