创建打印预览：使用一个<div>元素，通常设置为hidden，作为打印内容的容器。在用户触发打印操作时，将商品数据动态地插入到这个容器中，并设置好打印时的样式和格式，代码实现

创建打印预览通常是Web开发中一个用户体验优化的功能，它允许用户在打印之前预览文档或页面的打印效果。使用一个隐藏的`<div>`元素作为容器，可以在用户选择打印时将需要打印的内容动态插入到这个容器中，并且应用打印专用的样式。以下是实现该功能的基本步骤：

1. 在HTML中定义一个`<div>`元素，并通过CSS将其设置为隐藏状态，同时确保它在打印时可见。

<!-- HTML部分 -->
<div id="printArea" style="display: none;">
    <!-- 打印内容将会动态插入到这里 -->
</div>

/* CSS部分 */
@media print {
    #printArea {
        display: block !important; /* 打印时显示 */
        position: absolute;
        left: 0;
        top: 0;
    }
}

2. 当用户触发打印操作时，使用JavaScript动态将商品数据插入到`#printArea`容器中，并调整其样式和格式，确保内容在打印时的布局和外观符合预期。

// JavaScript部分
function showPrintPreview() {
    var printArea = document.getElementById('printArea');
    // 假设有一个函数getProductData()来获取商品数据
    var productData = getProductData();

    // 清空打印区域内容
    printArea.innerHTML = '';

    // 动态创建商品信息的HTML结构并插入到打印区域
    productData.forEach(function(product) {
        var productElement = document.createElement('div');
        productElement.innerHTML = '<h2>' + product.name + '</h2><p>价格: ' + product.price + '</p>';
        printArea.appendChild(productElement);
    });

    // 显示打印预览
    window.print();
}

// 绑定到某个按钮或其他触发器上
document.getElementById('printButton').addEventListener('click', showPrintPreview);

在上述示例中，我们首先定义了一个`printArea`容器，其默认是隐藏的。当用户点击一个按钮触发打印预览时，`showPrintPreview`函数被调用，它会获取商品数据，动态创建商品信息的HTML，并将其插入到`printArea`中。最后，我们调用`window.print()`方法打开打印预览窗口，允许用户预览并打印页面。