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,点击按钮上传并解析文件,最终结果如下

相关推荐
GISer_Jing18 分钟前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫20 分钟前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫20 分钟前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
阿智@1132 分钟前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
伍哥的传说43 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒1 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi5201 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者1 小时前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫4 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋9 小时前
最近一年的感悟
前端·javascript·程序员