Method, device and equipment for generating metrological calibration certificate based on Vue

Abstract

The application belongs to the technical field of certificate generation, and discloses a measurement calibration certificate generation method, device and equipment based on Vue. The method comprises the following steps: loading a calibration certificate generation page based on a Vue framework, receiving calibration parameters and synchronizing to a form data object by using bidirectional data binding, generating form data and performing integrity verification; rendering preview content on a DOM node in real time; converting the DOM node into a Canvas object, cutting the Canvas by using a page break point determined by pixel value detection when the total height exceeds the displayable height of a single page, and adding the Canvas to a new page of a PDF to generate a measurement calibration certificate PDF document. The above method renders the complete DOM node as a Canvas at one time, and then determines the page break point by detecting the white pixels within the preset row threshold from the bottom of the page upwards, so that the intelligent page breaking method determined by the page break point solves the problem of inaccurate page breaking caused by cutting elements first and then rendering in the prior art.

Description

Technical Field

[0001] This invention relates to the field of certificate generation technology, and in particular to a method, apparatus and equipment for generating metrological calibration certificates based on Vue. Background Technology

[0002] In metrological calibration work, the metrological calibration certificate serves as authoritative proof of the calibration results of instruments and equipment, and its generation is crucial. Currently, the generation of metrological calibration certificates faces the following main problems: low efficiency due to manual operation, requiring staff to manually fill in a large amount of certificate information, especially time-consuming during batch generation; difficulty in ensuring data accuracy, as manual filling is prone to typos or data entry errors; inconsistent formats, with certificates produced by different personnel showing differences in layout, font, and style, lacking standardization; and inconvenient data management, with certificate-related data stored in a scattered manner and lacking effective management and retrieval mechanisms. While existing technologies have achieved linkage between forms and PDFs, they do not address the unique needs of metrological calibration scenarios, such as dynamic table addition and deletion, rendering of complex mathematical formulas (e.g., uncertainty symbols), and automatic pagination of multi-page PDFs.

[0003] The above content is only used to help understand the technical solution of the present invention and does not represent an admission that the above content is prior art. Summary of the Invention

[0004] The main objective of this invention is to provide a method, apparatus, and device for generating metrological calibration certificates based on Vue, aiming to solve the technical problems of low efficiency of manual operation, difficulty in ensuring data accuracy, inconsistent formats, difficulty in dynamic table addition and deletion and rendering of complex mathematical symbols, and inaccurate automatic pagination of multi-page PDFs in the existing metrological calibration certificate generation process.

[0005] To achieve the above objectives, this invention provides a Vue-based method for generating metrological calibration certificates, which includes the following steps: Load the calibration certificate generation page built on the Vue framework, receive calibration parameters through the calibration certificate generation page, and use the two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time to generate form data, wherein the form data includes static text data, dynamic table data and special symbols; Perform integrity verification on the form data; Based on the validated form data, preview content is generated in real time by rendering on the Document Object Model (DOM) nodes in the preview area. The DOM node is converted into a Canvas object, and the height of the Canvas object that can be displayed on a single page of the PDF is calculated. When the total height of the Canvas object is greater than the height of the Canvas object that can be displayed on a single page of the PDF, the pixel values ​​are detected line by line from the bottom boundary of the current page upwards. When a row of pixels that continuously meets the preset number of rows threshold is detected and the red channel value, green channel value, and blue channel value all meet the white judgment condition, a pagination breakpoint is determined. The Canvas object is cut at the pagination breakpoint and added to a new page of the PDF to generate a metrology calibration certificate PDF document.

[0006] In one embodiment, the step of using a two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time, and generating form data, includes: The static text data in the calibration parameters is bound to the corresponding position in the form data object using Vue's template syntax to obtain the initial form data; Based on a responsive data binding mechanism and dynamic list rendering, table rows can be dynamically added or deleted. In response to the operation of adding or deleting rows, the dynamic table data in the calibration parameters is synchronized to the dynamic table in the initial form data to obtain the form data after the dynamic table data is synchronized. The system receives special symbols through a special symbol support unit, parses the special symbols using HTML superscript and subscript tags, fills them into the form data after the dynamic table data is synchronized, and associates the special symbols with the corresponding values ​​in the calibration parameters to generate form data with correct superscript and subscript formats. The special symbol support unit is used to identify the preset superscript and subscript mark syntax in the special symbols and perform tag conversion.

[0007] In one embodiment, the step of detecting pixel values ​​line by line from the bottom boundary of the current page upwards, and determining a pagination breakpoint when the red, green, and blue channel values ​​of a consecutive pixel line that meets a preset line number threshold all reach the white judgment condition, and then cutting the Canvas object at the pagination breakpoint and adding it to a new page of the PDF, includes: Starting from the bottom edge of the current page, obtain the pixel data of the Canvas object line by line upwards, and perform pixel value detection based on the pixel data; When it is detected that the red channel value, green channel value, and blue channel value of a row of pixels that continuously meet the preset row number threshold all reach the white judgment condition, the current row position is determined as the pagination breakpoint; Using the pagination breakpoint as the boundary, extract the image block of the current page from the Canvas object, and add the image block to the PDF document using the addImage method of the jsPDF library; Update the remaining Canvas objects and repeat the above operation until the total height of the remaining Canvas objects is less than or equal to the height of the Canvas objects that can be displayed in the single-page PDF.

[0008] In one embodiment, the method further includes: When the total height of the Canvas object is less than or equal to the height of the Canvas that can be displayed in the single-page PDF, the Canvas object is added to the single-page PDF document.

[0009] In one embodiment, the method further includes: When the calibration certificate generation page is initialized, the template identifier parameter carried in the URL is parsed; Based on the template identifier parameter, the corresponding template's metering-specific JSON data structure string is obtained from the backend server via the getInfo interface; The metering-specific JSON data structure string is parsed into a JavaScript object and assigned to the data object used to drive the form in the Vue instance, so as to automatically restore the form fields and dynamic table structure.

[0010] In one embodiment, the method further includes: In response to the template save command, the saveTemplate method is called to serialize the objects storing form data in the current Vue instance into a dedicated JSON data structure string for metering scenarios. The object sequence includes the number of rows in the dynamic table, the values ​​of each input box, and the state of the interactive controls. The dedicated JSON data structure string is sent to the backend server via asynchronous JavaScript and XML requests and stored with a unique template identifier.

[0011] In one embodiment, both the preview content and the metrology calibration certificate PDF document respond to changes in the state of a switch control, wherein the switch control is used to control the display or hiding of the background image and electronic seal in the PDF preview area.

[0012] Furthermore, to achieve the above objectives, this invention also proposes a Vue-based metrological calibration certificate generation device, which is applied to the Vue-based metrological calibration certificate generation method described above. The device includes: The dynamic form module is used to load a calibration certificate generation page built on the Vue framework. The calibration certificate generation page receives calibration parameters and uses a two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time to generate form data. The form data includes static text data, dynamic table data, and special symbols. The dynamic form module is used to perform integrity verification on the form data; The preview rendering module is used to render and generate preview content in real time on the Document Object Model (DOM) nodes in the preview area based on the validated form data. The preview rendering module is used to convert the DOM node into a Canvas object, calculate the height of the Canvas object that can be displayed on a single page of PDF, and when the total height of the Canvas object is greater than the height of the Canvas object that can be displayed on a single page of PDF, it detects pixel values ​​line by line from the bottom boundary of the current page upwards. When it detects that the red channel value, green channel value, and blue channel value of a pixel line that continuously meets the preset line number threshold all reach the white judgment condition, it determines the pagination breakpoint, cuts the Canvas object at the pagination breakpoint, and adds it to a new page of PDF to generate a metrology calibration certificate PDF document.

[0013] Furthermore, to achieve the above objectives, the present invention also proposes a Vue-based metrological calibration certificate generation device, which includes: a memory, a processor, and a Vue-based metrological calibration certificate generation program stored on the memory and executable on the processor. The Vue-based metrological calibration certificate generation program is configured to implement the steps of the Vue-based metrological calibration certificate generation method described above.

[0014] This invention loads a calibration certificate generation page based on the Vue framework, receives calibration parameters, and synchronizes them to a form data object using two-way data binding. It then generates form data and performs integrity verification. The content is rendered and previewed in real-time on DOM nodes. The DOM nodes are converted into Canvas objects. When the total height exceeds the displayable height of a single page, the Canvas is cut using pixel value detection to determine pagination breakpoints and added to a new page in the PDF, generating a metrology calibration certificate PDF document. This method first renders the entire DOM node as a Canvas in one go, then determines pagination breakpoints by detecting white pixels within a preset line threshold from the bottom of the page upwards. Using these determined pagination breakpoints, an intelligent pagination method is employed, solving the pagination inaccuracy problem caused by cutting elements before rendering in existing technologies. Attached Figure Description

[0015] Figure 1 This is a flowchart illustrating the first embodiment of the Vue-based metrology calibration certificate generation method of the present invention. Figure 2 This is a schematic diagram of the system architecture in the Vue-based metrology calibration certificate generation method of the present invention; Figure 3 This is a screenshot of the dynamic form configuration and data entry interface in the Vue-based metrology calibration certificate generation method of this invention; Figure 4 This is a screenshot of the template visualization design interface in the Vue-based metrology calibration certificate generation method of this invention; Figure 5 This is a structural block diagram of the first embodiment of the Vue-based metrology calibration certificate generation device of the present invention.

[0016] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0017] It should be understood that the specific embodiments described herein are for illustrative purposes only and are not intended to limit the scope of the invention.

[0018] This invention provides a method for generating metrological calibration certificates based on Vue, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the measurement calibration certificate generation method based on Vue of the present invention.

[0019] In this embodiment, the Vue-based metrological calibration certificate generation method includes the following steps: Step S10: Load the calibration certificate generation page built on the Vue framework, receive calibration parameters through the calibration certificate generation page, and use the two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time to generate form data.

[0020] In this embodiment, the executing entity can be a Vue-based metrology calibration certificate generation device. This Vue-based metrology calibration certificate generation device has functions such as data processing, data communication, and program execution. The Vue-based metrology calibration certificate generation device can be a computer terminal device or other network device, or other devices with similar functions. This embodiment does not limit this.

[0021] It should be noted that the current generation of metrological calibration certificates mainly suffers from the following problems. Existing html2canvas-based solutions (such as CN119537735A) employ a method of first cutting DOM fragments according to element boundaries and then rendering the Canvas segment by segment. Specifically, in the PDF generation stage, this implementation divides the HTML / DOM structure into several blocks by estimating element heights or based on a fixed pixel threshold, and then calls libraries such as html2canvas to render each block graphically, finally merging them into a multi-page PDF. However, the above method has the following drawbacks, leading to inaccurate pagination results: Element height estimation error: The actual rendering height of a DOM element is affected by multiple factors such as font size, line height, padding, and dynamic content, making it difficult to calculate accurately before rendering. If pagination is based on the estimated height, the pagination position will deviate from the actual rendering boundary of the element, easily leading to pagination errors such as text content being truncated in the middle or table rows being split in half.

[0022] The context isolation problem of chunked rendering: When each chunk is rendered independently, there is a lack of pixel-level continuity between chunks. When a content element crosses a cutting boundary, the element is an incomplete fragment in both chunks, resulting in visual breaks or blank gaps after merging, affecting the integrity and readability of the content.

[0023] Dynamic content adaptation is challenging: Metrological calibration certificates contain dynamically added or deleted table rows and complex special symbols. The final height of this content cannot be determined before the user completes the operation. Existing technologies, based on static or approximate height pre-segmentation strategies, have poor adaptability to dynamic content and special symbols, resulting in unpredictable shifts in pagination positions as content is added or deleted.

[0024] In summary, the existing technical approach of cutting elements before rendering places pagination decisions before the rendering process, resulting in errors between the pagination criteria and the actual rendering results. This is the root cause of inaccurate pagination.

[0025] Unlike the above implementation process, this invention first renders the entire DOM as a Canvas in one go, and then intelligently determines the pagination breakpoints through row-by-row pixel detection. The processing logic of these two methods is fundamentally different. Compared with the existing technology's approach of "slicing DOM elements first and then rendering them in blocks," this invention has the following technical advantages: Rendering is prioritized over pagination, fundamentally eliminating estimation errors. This invention first renders the entire DOM node as a single, continuous Canvas object using html2canvas, then performs pagination detection at the pixel level. Pagination decisions are based on the actual pixel data after rendering, rather than pre-estimated heights, thus eliminating pagination offsets caused by estimation errors.

[0026] Based on pixel-level RGB white area detection, this invention avoids content boundaries. It traverses the Canvas pixel data line by line from the bottom edge of the current page upwards, detecting whether the red, green, and blue channel values ​​of consecutive pixel rows that meet a preset line number threshold all reach the white judgment condition. This locates blank areas between content and identifies them as pagination breakpoints. Since the cutting position inevitably falls on visually blank lines (i.e., content spacing or empty lines), it ensures that text paragraphs, table rows, and other content are not truncated in the middle, resulting in natural and visually continuous pagination.

[0027] It adapts to dynamic content and is compatible with complex measurement symbols. Pagination detection operates on the rendered Canvas pixel layer, independent of DOM structure and element type, thus ensuring compatibility with dynamic table row additions / deletions, uncertainties, and other special formatting symbols. Regardless of content changes, pagination is performed on the final rendered result, ensuring accurate pagination in every generated PDF and meeting the stringent requirements for standardization and completeness in metrology calibration certificates.

[0028] In addition, existing solutions have the following problems: low efficiency of manual operation, requiring staff to manually fill in a large amount of certificate information, especially time-consuming when generating in batches; difficulty in ensuring data accuracy, as manual filling is prone to typos or data entry errors; inconsistent formats, with certificates produced by different personnel differing in layout, font, and style, lacking standardization; and inconvenient data management, with certificate-related data stored in a scattered manner and lacking an effective management and retrieval mechanism. Although existing technologies have achieved the linkage between forms and PDFs, they do not address the specific needs of metrology and calibration scenarios, such as dynamic table addition and deletion, rendering of complex mathematical formulas, and automatic pagination of multi-page PDFs.

[0029] To address the aforementioned technical issues, this embodiment loads a calibration certificate generation page based on the Vue framework, receives calibration parameters, and synchronizes them to a form data object using two-way data binding to generate form data. The form data undergoes integrity verification. Content is rendered and previewed in real-time on DOM nodes. DOM nodes are converted into Canvas objects. When the total height exceeds the displayable height of a single page, pixel values ​​are detected line by line from the bottom up. Pagination breakpoints are determined based on consecutive white pixels. The Canvas is then cut and added to a new page in the PDF, generating the metrology calibration certificate PDF document. This method first renders the entire DOM node as a Canvas at once, then determines pagination breakpoints by detecting white pixels within a preset row threshold from the bottom up. The intelligent pagination method using these breakpoints solves the problem of inaccurate pagination caused by cutting elements before rendering in existing technologies. This method achieves dynamic table adaptive addition and deletion, real-time rendering of special symbols, and intelligent anti-break pagination, significantly improving certificate generation efficiency and format standardization. Specifically, it can be implemented as follows. In its implementation, a modular design automates the entire process of generating metrology calibration certificates. The core modules include a dynamic form module, a preview rendering module, a template management module, and an interactive control module, all working collaboratively. Specifically, the dynamic form module enables flexible input and verification of calibration parameters. Its function is to build a dynamically configurable form interface based on Vue's two-way data binding mechanism, solving the problem that traditional static forms cannot adapt to the calibration needs of various instrument types.

[0030] It should be noted that the calibration certificate generation page is an interface built on the Vue framework, used for creating and outputting metrological calibration certificates. Calibration parameters are the parameter data recorded during the metrological calibration process.

[0031] Specifically, the process of using a two-way data binding mechanism to synchronize calibration parameters to the form data object of the Vue instance in real time and generate form data is as follows: The creation of the Vue instance data object: When the page loads, the Vue instance is initialized, and a unified form data object (such as otherForm and form objects) is declared in its data option. This object predefines all the fields required for the metrology calibration certificate, including static text data (such as instrument name, commissioning unit, calibration date, etc.), dynamic table data fields (such as an array of calibration equipment lists, an array of frequency response data, etc.), and special symbol fields.

[0032] By using Vue template syntax, static text data in the calibration parameters, such as device name and calibration date, is bound to the corresponding property positions of the form data object to construct the initial form data and ensure the accurate display of static information.

[0033] For the dynamic table data portion, based on Vue's reactive data binding mechanism and dynamic list rendering functionality, table rows that can be dynamically added or deleted are created. When a user adds or deletes a row, the dynamic table data in the calibration parameters is synchronized to the dynamic table in the initial form data, resulting in synchronized form data that ensures real-time updates of the dynamic table data.

[0034] In addition, a special symbol support unit is provided to address any special symbols that may appear in the calibration parameters. This unit can recognize preset superscript and subscript marking syntax in special symbols, specifically using HTML superscripts. 和下标标签进行转换解析，将特殊符号填入动态表格数据同步后的表单数据，并与对应数值关联，最终生成带有正确上下标格式的完整表单数据。

[0035] 构建的表单数据后续用于：完整性校验（逐字段检测是否为空或格式是否合法）；驱动预览区域DOM节点的实时渲染（通过Vue模板中的数据插值{{}}和v-bind将数据对象字段值映射至预览DOM中的对应位置）；序列化为JSON字符串进行模板保存与持久化存储。整个数据流向始终以Vue实例数据对象为核心，确保输入、预览、导出各环节数据的一致性。在Vue.js中，双向绑定是一种机制，允许数据的变化自动反映到视图上，同时视图中用户输入的变化也能自动更新数据，可以简化数据和视图之间的同步工作。Vue.js通过其响应式系统来实现这一功能。

[0036] 其中，动态表单模块的核心组成包括：动态表格单元、特殊符号支持单元及数据验证单元。动态表格单元，用于针对校准设备列表、频率响应等多字段数据，通过Vue的v-for指令实现表格行的动态增删。例如，校准设备列表限制最大行数为2行（符合计量标准器具数量规范），每行包含设备名称、型号 / 编号、测量范围、不确定度、溯源单位 / 证书号及有效期至6个必填字段，通过v-model绑定至otherForm.calibrationTableData数组，实现数据实时同步。特殊符号支持单元，用于集成数字字母上标生成器及快捷键提示，支持计量领域专用符号（如μs、dB、fu）的输入，并通过HTML的标签在预览区实时渲染。数据验证单元，用于通过lay-verify=required属性对关键字段（如温度和相对湿度）进行必填校验，结合自定义isFormValid方法递归检查对象（如environment）及数组（如resultTable）类型数据的完整性，确保生成的证书数据无遗漏。相应的工作流程为用户通过表单输入校准参数、动态表格单元根据操作增删行、特殊符号单元解析输入的符号并渲染、数据验证单元实时检查数据有效性、验证通过后进入预览渲染流程。

[0037] 进一步，预览渲染模块用于实现高精度PDF生成与多页分页，具体功能描述为该模块集成html2canvas与jspdf库，解决传统PDF生成工具中格式错乱、图片跨域及多页断裂问题，确保证书PDF的高清渲染与专业格式。核心组成包括：高清渲染子模块：通过设置scale=4缩放因子提升Canvas分辨率（默认分辨率的4倍），解决PDF生成过程中的文字模糊问题；同时配置useCORS:true支持跨域图片加载，确保电子公章（form.official_seal_url）、签名图片（form.approver_sign_url）等资源正常渲染。

[0038] 多页分页子模块：基于A4纸尺寸（595.28pt×841.89pt）设计智能分页算法，避免表格内容跨页断裂：①计算单页PDF可显示的Canvas高度，具体计算公式为a4HeightRef=(canvas.width / a4Width)*a4Height；②从当前页末尾向上检测连续空白行（像素值[255,255,255]），累计满足预设行数阈值（典型实施例取10行，该阈值可根据实际的版面需求来调整）的空白行时触发分页，确保表格行完整性；③通过pdf.addPage()创建新页，重复上述步骤直至剩余内容小于单页高度。关键技术点在于DOM转Canvas优化：通过html2canvas对目标节点（#pdfDom）进行整体渲染，保留Vue动态绑定的实时数据（如otherForm.receiptDate解析的日期格式）；以及PDF生成逻辑：将Canvas按分页高度切割为多个图像块，通过jspdf的addImage方法依次添加至PDF页面，最终生成符合计量证书规范的多页文档。

[0039] 进一步，模板管理模块用于实现表单配置的持久化与复用，具体功能描述为该模块通过JSON格式存储表单配置，解决传统工具中模板修改依赖开发人员的问题，支持用户自主保存、加载及复用校准模板。核心组成包括：模板存储单元：通过saveTemplate方法将当前表单配置（含动态表格行数、输入框内容、开关状态等）序列化为JSON字符串，存储至后端数据库模板加载单元：工具初始化时，通过getInfo接口从后端拉取历史模板数据，自动填充表单并恢复动态表格结构（如校准设备列表行数、频率响应表格字段值），减少重复输入。模板复用单元：支持跨仪器类型的模板复用，通过otherForm数据结构的字段映射（如将"扫描速度”字段添加至result对象），适配不同仪器（如示波器、频谱仪）的校准项目需求。

[0040] 进一步，交互控制模块用于实现用户输入与预览的联动，具体功能描述为该模块提供直观的交互控件，实现用户操作与PDF预览的实时联动，提升操作便捷性。具体包括：开关控件：通过v-model=otherForm.show_public绑定"显示背景图 / 公章”状态，联动控制PDF预览区的背景图（form.pdf_bg_url）及电子公章（form.official_seal_url）的显示 / 隐藏，满足"有无公章”场景切换需求。日期选择器：集成laydate组件，限制日期为非未来时间（max:0），并通过done回调同步更新receiptDate / calibrateDate / releaseDate字段，确保日期格式符合证书规范（如"2024年07月09日”）。表格操作按钮：提供"添加校准设备”、"删除”等按钮，通过addCalibrationTableData / delResultTable方法控制动态表格行数，限制校准设备列表≤2行（符合计量标准器具数量规范）、频率响应表格≤5行（避免PDF页面溢出）。本实施例中还可以参照图2所示的系统架构图，该图2展示了各模块之间的关系和数据流向。

[0041] 在具体实现中，工作人员在终端设备的浏览器中加载基于Vue框架构建的校准证书生成页面，该页面提供表单界面，包括静态文本信息区域（如委托方、仪器名称、型号等）、动态表格区域（如校准设备列表）及特殊符号输入区域。通过Vue的v-model指令实现表单输入与Vue实例中form数据对象的双向绑定，用户输入的校准参数实时同步至内存中的表单数据对象，生成包含完整录入信息的表单数据。其中，动态表格数据通过v-for指令渲染的可增删表格行获得，特殊符号通过集成上标 / 下标生成器输入。

[0042] 具体的，所述静态文本信息区域通过<input>标签与Vue实例的form数据对象双向绑定，接收"委托方”"仪器名称”"型号”等静态文本数据；所述动态表格区域通过Vue的v-for指令渲染可动态增删的表格行，例如"校准设备列表”表格初始显示1行，工作人员通过"添加校准设备”按钮触发addCalibrationTableData方法新增行（最大行数限制为2行），每行数据绑定至otherForm.calibrationTableData数组；所述特殊符号输入区域提供上标生成器链接及快捷键提示（Windows键+；键唤醒符号输入框），支持V / Hz^(1 / 2)、fu / MHz等计量专用符号的输入，输入内容通过v-model实时同步至预览区域。

[0043] 在一实施例中，最终生成的表单数据包括静态文本数据、动态表格数据及特殊符号。动态表格数据同步为基于响应式数据绑定机制与动态列表渲染实现可动态增删的表格行。例如，校准设备列表表格初始显示1行，每行包含设备名称、型号 / 编号、测量范围、不确定度、溯源单位 / 证书号、有效期至6个字段，通过v-model绑定至otherForm.calibrationTableData数组。用户点击"添加校准设备”按钮时，触发addCalibrationTableData方法向数组中新增一行（最大行数限制为2行，符合计量标准器具数量规范）；点击"删除”按钮时，调用delCalibrationTableData方法删除当前行。表格行的增删操作实时更新预设的数据数组，实现动态表格数据的实时同步。特殊符号解析与渲染为通过特殊符号支持单元接收计量领域专用符号（如μs、dB、fu / MHz、V / Hz^(1 / 2)等）。页面提供"常用符号”提示区及快捷键提示（Windows键+；键唤醒符号输入框），并集成数字字母上标生成器链接。用户输入的特殊符号通过Vue的v-text或v-html指令在预览区域进行解析，利用HTML的上标标签和下标标签对所述计量领域专用符号进行实时渲染，该动态表单配置与数据录入界面截图可以参照图3所示，图3用于显示用户录入仪器信息、校准日期等数据的界面。

[0044] 步骤S20：对所述表单数据进行完整性校验。

[0045] 在具体实现中，在工作人员提交数据前，通过数据验证单元对表单数据进行完整性校验，本实施例中完整性校验具体包括对"温度”"相对湿度”等关键字段，通过lay-verify=required属性进行必填项校验，若未填写则触发layui框架的表单验证提示；通过自定义isFormValid方法递归检查复杂数据类型的完整性：对对象类型数据（如otherForm.environment），验证其所有属性（a1"温度”、a2"相对湿度”等）非空；对数组类型数据（如otherForm.resultTable），验证数组长度≥1且每个元素的字段非空；若校验通过，进入预览渲染流程；若未通过，高亮显示未填写字段并提示"请完善必填项”。

[0046] 步骤S30：基于通过校验的表单数据，在预览区域的文档对象模型DOM节点上实时渲染生成预览内容。

[0047] 在具体实现中，基于Vue的响应式数据绑定机制，将通过校验的表单数据实时渲染至预览区域的DOM节点（id为#pdfDom）。具体包括通过"显示背景图和公章”开关控件控制预览区域背景图（form.pdf_bg_url）及电子公章（form.official_seal_url）的显示 / 隐藏，开关状态变更时通过watch监听器同步更新DOM样式。通过laydate日期选择器选择"接收日期”、"校准日期”等时间参数，选择结果通过done回调函数同步至otherForm.receiptDate等字段，并在预览区域按"YYYY年MM月DD日”格式解析显示。动态表格行的增删操作实时同步至预览区域，例如新增校准设备表格行后，预览区域通过v-for重新渲染表格DOM，确保输入数据与预览内容一致。

[0048] 步骤S40：将所述DOM节点转化为Canvas对象，计算单页PDF可显示的Canvas对象高度，当所述Canvas对象的总高度大于所述单页PDF可显示的Canvas对象高度时，从当前页底部边界向上逐行检测像素值，当检测到连续满足预设行数阈值的像素行的红色通道值、绿色通道值、蓝色通道值均达到白色判断条件时确定分页断点，以所述分页断点切割所述Canvas对象并添加至PDF新页，以生成计量校准证书PDF文档。本实施例中预设行数阈值可以设置为10行，满足白色判断条件也即像素值均达到255，具体判断过程例如当检测到连续10行像素的红色通道值、绿色通道值、蓝色通道值均为255时，将当前行所在位置确定为分页断点的白色像素判定为空白行，从而避免单行空白误触发。

[0049] 在具体实现中，本实施例中调用预览渲染模块，集成html2canvas与jspdf库实现PDF生成与智能分页，并且需要强调的是本实施例中的DOM节点转化为Canvas对象区别于现有技术先按元素边界切割DOM再逐段渲染的方式，将DOM节点转化为Canvas对象具体包括以下子步骤：DOM转Canvas渲染。调用html2canvas对预览区域DOM节点（#pdfDom）进行渲染，配置参数包括：scale:4（4倍缩放以提升清晰度）、useCORS:true（支持跨域加载电子公章、签名图片）、allowTaint:true，生成包含完整校准数据的高清Canvas对象。计算单页可显示高度。基于A4纸尺寸（595.28pt×841.89pt）计算单页PDF可显示的Canvas高度：a4HeightRef=(canvas.width / 595.28)*841.89。分页判断与执行。判断Canvas对象的总高度是否大于所述单页PDF可显示的Canvas对象高度：若大于，则执行分页操作：①从当前页的底部边界位置开始，向上逐行获取所述Canvas对象的像素数据；②基于所述像素数据，当检测到连续10行像素的红色通道值、绿色通道值、蓝色通道值均为255时，将当前行所在位置确定为分页断点（连续满足预设行数阈值（本例实施例取10行，该阈值可根据版面需求进行调整）的白色像素判定为空白行，避免单行空白误触发）；③以所述分页断点为界，从所述Canvas对象中截取当前页的图像块，并通过jspdf库的addImage方法将所述图像块添加至PDF文档；④更新剩余Canvas对象，并重复上述操作直至剩余的Canvas对象的总高度小于或等于所述单页PDF可显示的Canvas对象高度。当所述Canvas对象的总高度小于或等于所述单页PDF可显示的Canvas高度时，将所述Canvas对象添加至单页PDF文档。最后通过jspdf的output(‘blob’)方法将生成的PDF转化为Blob对象，调用uploadPDF方法将Blob对象上传至后端服务器，同时通过previewUrl方法生成预览图URL，供工作人员确认PDF效果。模板可视化设计界面截图可以参照图4所示，图4用于展示用户设计证书模板的操作界面和实时预览效果。

[0050] 在一实施例中，在页面初始化时，解析URL中携带的模板标识参数；根据所述模板标识参数，通过getInfo接口从后端服务器获取对应模板的计量专用JSON数据结构字符串；将所述计量专用JSON数据结构字符串解析为JavaScript对象，并赋值给Vue实例中用于驱动表单的数据对象，以自动恢复表单字段及动态表格结构。

[0051] 其中，计量专用JSON数据结构字符串是计量校准领域的参数、量值、单位、不确定度等业务数据，按照JSON字段结构组织，并将其中的上下标等特殊符号转换为HTML标签后，序列化生成的符合计量业务规范的JSON格式字符串。

[0052] 例如在页面初始化时，解析URL中携带的模板标识参数（template_id）；根据所述模板标识参数，通过getInfo接口从后端服务器获取对应模板的JSON字符串；将所述JSON字符串解析为JavaScript对象，并赋值给Vue实例中用于驱动表单的数据对象（如otherForm），以自动恢复表单字段及动态表格结构（包括动态表格的行数、各输入框的值及开关状态）。

[0053] 在一实施例中，响应于模板保存指令，调用保存模板saveTemplate方法，将当前Vue实例中存储表单数据的对象序列化为面向计量场景的专用JSON数据结构字符串，其中，所述对象包含动态表格的行数、各输入框的值以及交互控件的状态；通过异步JavaScript和XML请求将所述计量专用JSON数据结构字符串发送至后端服务器，并关联唯一的模板标识符进行存储。

[0054] 需要说明的是，支持工作人员将当前表单配置保存为模板，或加载历史模板以复用校准参数，具体包括：模板保存：工作人员点击"保存模版”按钮，触发saveTemplate方法，将otherForm对象（含动态表格行数、输入框内容、开关状态等配置）序列化为JSON字符串，通过AJAX请求发送至后端，存储至数据库（关联template_id）；模板加载：页面初始化时，若URL包含template_id参数，通过getInfo接口从后端拉取对应模板的JSON数据，解析后赋值给otherForm对象，自动填充表单字段并恢复动态表格结构（如校准设备列表行数、频率响应表格字段值）；模板复用：工作人员可基于历史模板修改部分参数（如仪器名称和校准日期），无需重新配置完整表单，适配同类型仪器的批量校准场景。上述方式中用户可将当前校准参数（含动态表格行数、输入框值、开关状态等）保存为模板，并支持通过URL参数一键加载历史模板，自动恢复表单字段及动态表格结构。相比传统工具中模板修改依赖开发人员、同类仪器需重复录入的缺陷，本发明使证书生成时间从30分钟缩短至5分钟以内，显著提升了批量校准场景下的工作效率，同时适配示波器、频谱仪等多种仪器类型的差异化需求。

[0055] 在一实施例中，预览内容和计量校准证书PDF文档均响应于开关控件的状态变化，其中，所述开关控件用于联动控制PDF预览区域中的背景图和电子公章的显示或隐藏。由于PDF生成流程直接读取当前预览区域的DOM节点（包含开关状态控制的背景图和公章），因此最终生成的计量校准证书PDF文档与用户最后一次预览的内容完全一致。降低资源加载开销：开关关闭时，背景图和公章资源不被渲染，减少了html2canvas在DOM转Canvas过程中需要处理的图像数据量，从而降低了内存占用和渲染时间，特别是在批量生成或低配置设备上效果尤为明显。这种方式满足了业务场景中"含公章 / 不含公章”版本的快速切换需求，避免了分别维护两套模板或重新生成PDF的资源开销，提升了操作便捷性和用户体验。

[0056] 本实施例中加载基于Vue框架的校准证书生成页面，接收校准参数并利用双向数据绑定同步至表单数据对象，生成表单数据并进行完整性校验；在DOM节点上实时渲染预览内容；将DOM节点转化为Canvas对象，在总高度超过单页可显示高度时利用像素值检测确定的分页断点切割Canvas并添加至PDF新页，生成计量校准证书PDF文档。上述方式先将完整DOM节点整体一次性渲染为Canvas、再通过从页面底部向上逐行检测预设行数阈值内的白色像素确定分页断点，利用所确定的分页断点智能分页方法，解决了现有技术先切割元素再渲染导致的分页不准确问题。

[0057] 参照图5，图5为本发明基于Vue的计量校准证书生成装置第一实施例的结构框图。

[0058] 如图5所示，本发明实施例提出的基于Vue的计量校准证书生成装置包括：动态表单模块10，用于加载基于Vue框架构建的校准证书生成页面，通过所述校准证书生成页面接收校准参数，并利用双向数据绑定机制将所述校准参数实时同步至Vue实例的表单数据对象，生成表单数据，其中，所述表单数据包括静态文本数据、动态表格数据及特殊符号；所述动态表单模块10，用于对所述表单数据进行完整性校验；预览渲染模块20，用于基于通过校验的表单数据，在预览区域的文档对象模型DOM节点上实时渲染生成预览内容；所述预览渲染模块20，用于将所述DOM节点转化为Canvas对象，计算单页PDF可显示的Canvas对象高度，当所述Canvas对象的总高度大于所述单页PDF可显示的Canvas对象高度时，从当前页底部边界向上逐行检测像素值，当检测到连续满足预设行数阈值的像素行的红色通道值、绿色通道值、蓝色通道值均达到白色判断条件时确定分页断点，以所述分页断点切割所述Canvas对象并添加至PDF新页，以生成计量校准证书PDF文档。

[0059] 本实施例中加载基于Vue框架的校准证书生成页面，接收校准参数并利用双向数据绑定同步至表单数据对象，生成表单数据并进行完整性校验；在DOM节点上实时渲染预览内容；将DOM节点转化为Canvas对象，在总高度超过单页可显示高度时利用像素值检测确定的分页断点切割Canvas并添加至PDF新页，生成计量校准证书PDF文档。上述方式先将完整DOM节点整体一次性渲染为Canvas、再通过从页面底部向上逐行检测预设行数阈值内的白色像素确定分页断点，利用所确定的分页断点智能分页方法，解决了现有技术先切割元素再渲染导致的分页不准确问题。

[0060] 本申请实施例还提供了一种基于Vue的计量校准证书生成设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信，存储器，用于存放基于Vue的计量校准证书生成程序；处理器，用于执行存储器上所存放的程序时，实现上述基于Vue的计量校准证书生成方法。

[0061] 上述基于Vue的计量校准证书生成设备提到的通信总线可以是外设部件互联标准(英文：Peripheral Component Interconnect，简称：PCI)总线或扩展工业标准结构(英文：Extended Industry Standard Architecture，简称：EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。

[0062] 通信接口用于上述基于Vue的计量校准证书生成设备与其他设备之间的通信。

[0063] 存储器可以包括随机存取存储器(英文：Random Access Memory，简称：RAM)，也可以包括非易失性存储器(英文：Non-Volatile Memory，简称：NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

[0064] 上述的处理器可以是通用处理器，包括中央处理器(英文：Central ProcessingUnit，简称：CPU)、网络处理器(英文：Network Processor，简称：NP)等；还可以是数字信号处理器(英文：Digital Signal Processing，简称：DSP)、专用集成电路(英文：ApplicationSpecific Integrated Circuit，简称：ASIC)、现场可编程门阵列(英文：Field-Programmable Gate Array，简称：FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

[0065] 在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk (SSD))等。

[0066] 需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语"包括”、"包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句"包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

[0067] 本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

[0068] 以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

[0069] 应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

[0070] 需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

[0071] 另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的基于Vue的计量校准证书生成方法，此处不再赘述。

[0072] 此外，需要说明的是，在本文中，术语"包括”、"包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句"包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

[0073] 上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

[0074] 通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述 实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通 过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的 技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体 现出来，该计算机软件产品存储在一个存储介质(如，只读存储器(Read Only Memory，ROM) / RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

[0075] 以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

[0076] 可理解的是，本发明实施例提供的系统与本发明实施例提供的方法相对应，相关内容的解释、举例和有益效果可以参考上述方法中的相应部分。

Claims

1. A method for generating metrological calibration certificates based on Vue, characterized in that, The Vue-based metrology calibration certificate generation method includes: Load the calibration certificate generation page built on the Vue framework, receive calibration parameters through the calibration certificate generation page, and use the two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time to generate form data, wherein the form data includes static text data, dynamic table data and special symbols; Perform integrity verification on the form data; Based on the validated form data, preview content is generated in real time by rendering on the Document Object Model (DOM) nodes in the preview area. The DOM node is converted into a Canvas object, and the height of the Canvas object that can be displayed on a single page of the PDF is calculated. When the total height of the Canvas object is greater than the height of the Canvas object that can be displayed on a single page of the PDF, the pixel values ​​are detected line by line from the bottom boundary of the current page upwards. When a row of pixels that continuously meets the preset number of rows threshold is detected and the red channel value, green channel value, and blue channel value all meet the white judgment condition, a pagination breakpoint is determined. The Canvas object is cut at the pagination breakpoint and added to a new page of the PDF to generate a metrology calibration certificate PDF document.

2. The method for generating metrological calibration certificates based on Vue as described in claim 1, characterized in that, The process of using a two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time, generating form data, includes: The static text data in the calibration parameters is bound to the corresponding position in the form data object using Vue's template syntax to obtain the initial form data; Based on a responsive data binding mechanism and dynamic list rendering, table rows can be dynamically added or deleted. In response to the operation of adding or deleting rows, the dynamic table data in the calibration parameters is synchronized to the dynamic table in the initial form data to obtain the form data after the dynamic table data is synchronized. The system receives special symbols through a special symbol support unit, parses the special symbols using HTML superscript and subscript tags, fills them into the form data after the dynamic table data is synchronized, and associates the special symbols with the corresponding values ​​in the calibration parameters to generate form data with correct superscript and subscript formats. The special symbol support unit is used to identify the preset superscript and subscript mark syntax in the special symbols and perform tag conversion.

3. The Vue-based metrological calibration certificate generation method as described in claim 1, characterized in that, The process of detecting pixel values ​​line by line from the bottom edge of the current page upwards, and determining a pagination breakpoint when the red, green, and blue channel values ​​of a consecutive pixel line that meets a preset line number threshold all reach the white judgment condition, and then cutting the Canvas object at the pagination breakpoint and adding it to a new page of the PDF, includes: Starting from the bottom edge of the current page, obtain the pixel data of the Canvas object line by line upwards, and perform pixel value detection based on the pixel data; When it is detected that the red channel value, green channel value, and blue channel value of a row of pixels that continuously meet the preset row number threshold all reach the white judgment condition, the current row position is determined as the pagination breakpoint; Using the pagination breakpoint as the boundary, extract the image block of the current page from the Canvas object, and add the image block to the PDF document using the addImage method of the jsPDF library; Update the remaining Canvas objects and repeat the above operation until the total height of the remaining Canvas objects is less than or equal to the height of the Canvas objects that can be displayed in the single-page PDF.

4. The Vue-based metrological calibration certificate generation method as described in claim 3, characterized in that, The method further includes: When the total height of the Canvas object is less than or equal to the height of the Canvas that can be displayed in the single-page PDF, the Canvas object is added to the single-page PDF document.

5. The method for generating metrological calibration certificates based on Vue as described in claim 1, characterized in that, The method further includes: When the calibration certificate generation page is initialized, the template identifier parameter carried in the URL is parsed; Based on the template identifier parameter, the corresponding template's metering-specific JSON data structure string is obtained from the backend server via the getInfo interface; The metering-specific JSON data structure string is parsed into a JavaScript object and assigned to the data object used to drive the form in the Vue instance, so as to automatically restore the form fields and dynamic table structure.

6. The Vue-based metrological calibration certificate generation method as described in claim 1, characterized in that, The method further includes: In response to the template save command, the saveTemplate method is called to serialize the objects storing form data in the current Vue instance into a dedicated JSON data structure string for metering scenarios. The object sequence includes the number of rows in the dynamic table, the values ​​of each input box, and the state of the interactive controls. The dedicated JSON data structure string is sent to the backend server via asynchronous JavaScript and XML requests and stored with a unique template identifier.

7. The method for generating metrological calibration certificates based on Vue as described in any one of claims 1 to 6, characterized in that, Both the preview content and the metrology calibration certificate PDF document respond to changes in the state of the switch control, wherein the switch control is used to control the display or hiding of the background image and electronic seal in the PDF preview area.

8. A Vue-based metrological calibration certificate generation device, characterized in that, The Vue-based metrological calibration certificate generation device is applied to the Vue-based metrological calibration certificate generation method as described in any one of claims 1 to 7, and the device comprises: The dynamic form module is used to load a calibration certificate generation page built on the Vue framework. The calibration certificate generation page receives calibration parameters and uses a two-way data binding mechanism to synchronize the calibration parameters to the form data object of the Vue instance in real time to generate form data. The form data includes static text data, dynamic table data, and special symbols. The dynamic form module is used to perform integrity verification on the form data; The preview rendering module is used to render and generate preview content in real time on the Document Object Model (DOM) nodes in the preview area based on the validated form data. The preview rendering module is used to convert the DOM node into a Canvas object, calculate the height of the Canvas object that can be displayed on a single page of PDF, and when the total height of the Canvas object is greater than the height of the Canvas object that can be displayed on a single page of PDF, it detects pixel values ​​line by line from the bottom boundary of the current page upwards. When it detects that the red channel value, green channel value, and blue channel value of a pixel line that continuously meets the preset line number threshold all reach the white judgment condition, it determines the pagination breakpoint, cuts the Canvas object at the pagination breakpoint, and adds it to a new page of PDF to generate a metrology calibration certificate PDF document.

9. A Vue-based metrological calibration certificate generation device, characterized in that, The Vue-based metrology calibration certificate generation device includes: a memory, a processor, and a Vue-based metrology calibration certificate generation program stored on the memory and executable on the processor. The Vue-based metrology calibration certificate generation program is configured to implement the steps of the Vue-based metrology calibration certificate generation method as described in any one of claims 1 to 7.

10. A storage medium, characterized in that, The storage medium stores a Vue-based metrology calibration certificate generation program, which, when executed by a processor, implements the steps of the Vue-based metrology calibration certificate generation method as described in any one of claims 1 to 7.

Images