H5 直接转换呈现Excel 表单.md

需求就是为了宣传营销商品将一个 EXCEL 清单包含价格折扣口令图片等等的表格直接在手机上显示。

两个有用的工具网站

在线转换EXCEL 为 JSON 的网站
直接将 EXCEL转换为 html 包含 EXCEL 里的样式全部转换的网站

通用做法

第一种：

利用第一个工具网站获得 JSON 数据，将数据填充进<table>放进页面元素。
代码如下：

var dataArr.=[//JSON 数据]
function writeTable(dataArr, channel) {
    var indent = '<div class="tableCon"><table id="list" border="0" cellpadding="0" cellspacing="0">';
    for (var i = 0; i < dataArr.length; i++) {
        if (i == 0) {
            //table 标题
                indent += `<tbody class="tbody_title" style="color: '#ffffff'}"><tr><td class="center header">${dataArr[i].pic}</td><td class="center header">${dataArr[i].name}</td><td class="center header">${dataArr[i].qx}</td><td class="center header">${dataArr[i].price}</td><td class="center header">${dataArr[i].oldprice}</td><td class="center header">${dataArr[i].time}</td><td class="center header">${dataArr[i].info}</td></tr></tbody>`
        } else {
                indent += `<tr class="tbody_content_tr"><td colspan="1"><img src="${dataArr[i].pic}" style="width:50px;height:50px"></td><td >${dataArr[i].name}</td><td >${dataArr[i].qx}</td><td>${dataArr[i].price}</td><td>${dataArr[i].oldprice}</td><td >${dataArr[i].time}</td><td> <button class="copyBtn3" data-v=${i} data-clipboard-text='${dataArr[i].info}'>复制</button></td></tr>`;
        }
    }
    indent += '</table></div>';
    $(".container").append(indent);
    }
}

第二种：

利用第二个网站生成的 html 直接利用 iframe 放进去