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 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹30 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端