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

相关推荐
虾球xz8 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇13 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒17 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员33 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐35 分钟前
前端图像处理(一)
前端
程序猿阿伟42 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒44 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express