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

相关推荐
喵叔哟6 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django