内容目录
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参数执行打印任务。
