View Categories

generatePrintData 函数

generatePrintData 函数的数据获取方式分析 #

YilabelWeb2.html 中, generatePrintData 函数目前采用的是 硬编码数据 方式:

function generatePrintData() {
    // 定义标签中的列名称,对应标签设计中的字段标识
    const cols = ["pname", "pbrands", "podel", "pqrcode", "pdescription", "pcode"];
    
    // 定义标签数据的二维数组
    const vals = [
        // 第一个标签的数据
        ["智能手机Pro Max", // pname: 产品名称
         "科技先锋",         // pbrands: 产品品牌
         "型号A2023",         // podel: 产品型号
         "QRCODE123456789",   // pqrcode: 二维码信息
         "高性能智能手机,支持5G网络,超大容量电池", // pdescription: 产品描述
         "SPH-2023-001"       // pcode: 产品代码
        ],
        // ... 更多数据 ...
    ];
    
    // 返回包含列定义和数据内容的对象
    return { cols, vals };
}

可扩展的数据获取方式 #

基于项目中已有的API调用模式和功能需求, generatePrintData 函数可以扩展为以下几种数据获取方式:

1. API 接口获取(远程数据源) #

参考文件中已有的API调用方式,实现从远程服务器获取打印数据:

function generatePrintData() {
    return new Promise((resolve, reject) => {
        // API配置,以下apiUrl 地址和token是虚拟数据。
        const apiUrl = 'https://api.yi-label.com/api/v1/print-data';  
        const authorization = 'b3f22d48-72b9-410b-9ee6-xxxxxxxx';
        
        // 发送GET请求
        fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${authorization}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`API请求失败: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            // 假设API返回的数据结构包含cols和vals
            const apiData = data.data || {};
            const cols = apiData.columns || ["pname", "pbrands", "podel", "pqrcode", "pdescription", "pcode"];
            const vals = apiData.values || [];
            
            resolve({ cols, vals });
        })
        .catch(error => {
            console.error('获取打印数据失败:', error);
            reject(error);
        });
    });
}

2. 表单输入获取(用户输入数据源) #

从页面表单收集用户输入的数据:

function generatePrintData() {
    // 定义标签中的列名称
    const cols = ["pname", "pbrands", "podel", "pqrcode", "pdescription", "pcode"];
    
    // 从表单获取数据
    const productName = document.getElementById('productName').value || '未命名产品';
    const productBrand = document.getElementById('productBrand').value || '未知品牌';
    const productModel = document.getElementById('productModel').value || '未知型号';
    const qrCode = document.getElementById('qrCode').value || 'DEFAULTQRCODE';
    const description = document.getElementById('description').value || '无描述';
    const productCode = document.getElementById('productCode').value || '000000';
    
    // 构建数据数组
    const vals = [[productName, productBrand, productModel, qrCode, description, productCode]];
    
    return { cols, vals };
}

3. URL 参数获取(外部系统传递数据源) #

从URL查询参数中获取打印数据:

function generatePrintData() {
    // 定义标签中的列名称
    const cols = ["pname", "pbrands", "podel", "pqrcode", "pdescription", "pcode"];
    
    // 解析URL参数
    const urlParams = new URLSearchParams(window.location.search);
    
    // 从URL参数中获取数据,提供默认值
    const productName = urlParams.get('pname') || '产品名称';
    const productBrand = urlParams.get('brand') || '品牌名称';
    const productModel = urlParams.get('model') || '型号';
    const qrCode = urlParams.get('qr') || 'QRCODE' + Date.now();
    const description = urlParams.get('desc') || '产品描述';
    const productCode = urlParams.get('code') || 'PROD' + Math.floor(Math.random() * 10000);
    
    // 构建数据数组
    const vals = [[productName, productBrand, productModel, qrCode, description, productCode]];
    
    return { cols, vals };
}

多条数据打印时,也可以保存为临时json数据的方式,通过url参数执行打印任务。

滚动至顶部