vue-plugin-hiprint打印表格怎么赋值

### 使用 `vue-plugin-hiprint` 实现打印表格赋值

为了在 Vue.js 应用中通过 `vue-plugin-hiprint` 插件实现打印表格的赋值操作，需遵循特定的方法调用来设置数据源。通常情况下，在准备要打印的数据之后，可以通过 HiPrint 提供的 API 方法来完成这一过程。

#### 创建打印模板
首先创建 HTML 结构作为打印模板的一部分，这部分结构会被隐藏起来仅用于打印预览或实际打印输出：

<div id="printTemplate" style="display:none;">
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody v-for="(item, index) in printData" :key="index">
            <tr>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.description }}</td>
            </tr>
        </tbody>
    </table>
</div>

此部分代码定义了一个带有表头和动态行内容的表格，其中每一列对应于对象中的属性[^1]。

#### 准备打印函数
接着编写 JavaScript 或 TypeScript 逻辑以填充上述模板的数据，并触发打印行为：

methods: {
    handlePrint() {
        const dataToPrint = [
            {id: 1, name: "Item One", description: "Description of Item One"},
            {id: 2, name: "Item Two", description: "Description of Item Two"}
        ];
        
        this.printData = dataToPrint;
        
        setTimeout(() => {
            window.$Hiprint.print({
                templateId: '#printTemplate',
                title: '我的打印标题'
            });
        }, 0);
    }
}

这里先设置了待打印的数据列表到组件实例上的某个变量（如 `this.printData`），再利用 `$Hiprint.print()` 来指定哪个 DOM 元素应该被当作模板进行渲染并最终打印出来[^2]。