山东大学项目实训（四）——电子病历页面的编写

在学习了vue之后，我所做的第一个项目是电子病历页面的编写。下面记录一下该页面的编写过程。

1. 介绍

本实验旨在利用 Vue.js 和相关库，创建一个用于展示医院病历页的页面，并添加截图和上传功能。

2. 实验步骤

2.1 准备工作

在开发环境中安装 Vue.js 和相关库

2.2 编写代码

2.2.1模板

在 <template> 标签中，定义了页面的结构和布局。使用了一些内联样式来设置页面的样式，例如宽度、背景色等。使用了 <img> 标签来展示图片，以及一些 <label> 和 <field> 标签来展示和编辑文本信息。

2.2.2脚本

在 <script> 标签中，引入了 html2canvas 库和 axios 库。

在 data 方法中定义了组件的数据属性，包括 robot（医生记录）、user_id（用户ID）。

在 created 钩子中，将 this.$robotHistory 的值赋给 robot 属性。

在 methods 对象中定义了两个方法：takeScreenshot()：使用 html2canvas 库将页面内容转换为 canvas，并生成截图。然后创建一个 <a> 标签，将 canvas 转换为图片链接，触发下载。upload()：使用 axios 库发送 POST 请求到指定的服务器地址，上传数据。

2.2.3样式

暂未设置样式格式，后续可根据项目进展动态调整

2.3 测试页面

在浏览器中打开页面，测试页面的显示效果

点击Take Screenshot按钮，测试截图功能

 可以发现已经下载了图片，查看是否为该页面截图

检查无误，截图功能良好。

上传功能需要连接后端，目前无法进一步测试。 

4. 结果分析

经过测试，页面能够正确显示医院病历页的内容，并且截图功能也能够正常工作。通过 Vue.js 和相关库的使用，成功地实现了一个包含数据展示、截图功能的前端页面。