Vue draws body temperature list and three test list components to realize front-end js printing

Update: Code open source  []

Help please help click start 

Development requirements:  [software development program development]

The new version is a complete rewrite of the temperature sheet, drawn entirely using svg. Access address:  The new version of the three test orders


  • Pure svg development, compatible with various mainstream frameworks, such as react, Vue, angular, jsp, HTML , etc.
  • Out-of-the-box , data is extracted, and data can be imported by directly connecting to the interface
  • Support printing , you can choose pdf or image download
  • Flexible two-open , custom field configuration : directly modify the configuration to customize the extension field, and the code comments are complete
  • Custom sizes are supported.

Update line =================================================== =============== 

Online access address:  three-measure single body temperature single body temperature chart

This article describes how to use vue to draw a temperature list (aka three-measurement list)

temperature list

The temperature sheet, also known as the three-test sheet, is part of the electronic medical record. The hospital temperature list drawing is mainly used to record the patient’s vital signs and related conditions, including the patient’s name, age, gender, department, bed number, admission date, admission number, date, hospital days, days after surgery, pulse, respiration, Body temperature, blood pressure, intake and output, stool frequency, weight, height, page number, etc. One a week (7 days), and the patient information is recorded 6 times a day.

The components are developed using the vue technology stack and d3 for chart rendering.

Temperature single data structure

The data organization is mainly divided into three parts. They are patient information data, chart display data, and daily data display.

patient information

There is only one patient information, so it can be stored in a simple keyvalue form, for example: {name: ‘patient name’, hospital: ‘test hospital name’}, and you can get the data in vue and render it.

Chart display

The chart data stores the data of each record to facilitate the drawing of the chart. We need to know the coordinate information of each drawing point. The coordinate information consists of the X-axis time and the Y-axis value, so we must include two fields of time and value, plus With a type field, all the data of the chart can be stuffed into a List and rendered together.

For example, a week of body temperature is 7 * 6 = 42 pieces of data. Each piece of data contains four values: date, time, type, and type value.


    date: '2020-12-25',
    time: '03:00:00',
    code: 'body temperature' ,
    value: '30'

daily data

Daily data is similar to chart data and needs to be rendered repeatedly, so a List is also required to be saved, which is distinguished by time and latitude.


    date:  '2020-12-25' , 
    times:  null , 
    code:   'weight' , 
    value:  '86' 


The printing function is implemented using the window print native api. The core idea is to use an iframe tag to dynamically render the DOM range that needs to be printed.

// generate iframe code
function generateHtmlCodeInfo(option) {
    option = option || {}
    var id = 'iframeId' 
    var style = {{EJS0}}
    const code =

    return {

// Generate print iframe
function htmlRuilangGenerateIframe(reportUrl, rowData, option) {
    var codeInfo = generateHtmlCodeInfo(reportUrl, rowData, option, keys)
    var iframe = document.createElement('iframe')
        'position:absolute;width:0px;height:0px;border: 0;'
    ) =
    var ifrmaeDoc = iframe.contentWindow.document

It should be noted that after the printing is completed, the iframe element needs to be cleaned up, and the unnecessary memory can be cleaned up in time. You can also use the singleton mode and choose to reuse an iframe for the printing function. This time, the method of cleaning after printing is adopted. Students who use vue router can also choose to directly specify the iframe address to point to the page to be printed.

Leave a Comment

Your email address will not be published. Required fields are marked *