vue打印elementui表格步骤和代码

以下是Vue中打印Element UI表格的步骤和代码：

步骤1：安装插件

首先需要安装两个插件：html2canvas和jspdf。

npm install html2canvas jspdf --save

步骤2：创建打印方法

在Vue组件中创建一个打印方法，用于打印Element UI表格。

printTable() {
    const dom = document.querySelector('#table'); // 获取表格的DOM元素
    html2canvas(dom).then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        const imgWidth = 595.28;
        const imgHeight = 592.28 / contentWidth * contentHeight;
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        const PDF = new jspdf('', 'pt', 'a4');
        if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
            while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                    PDF.addPage();
                }
            }
        }
        PDF.save('table.pdf');
    });
}

解释一下代码：

1.获取表格的DOM元素：使用document.querySelector方法获取表格的DOM元素。

2.使用html2canvas将DOM元素转化为canvas。

3.计算打印内容的高度和宽度。

4.计算每一页打印内容的高度。

5.将canvas转化为图片，并使用jspdf插件将图片转化为pdf。

6.将pdf文件进行下载。

步骤3：在表格中添加按钮

在Element UI表格中添加一个按钮，用于触发打印方法。

<el-table ref="table" id="table" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button type="text" @click="printTable()">打印</el-button>
        </template>
    </el-table-column>
</el-table>

解释一下代码：

1.在表格中添加一个id为“table”的属性，方便获取表格的DOM元素。

2.在表格中添加一个按钮，使用@click绑定打印方法。

完成以上步骤后，就可以使用Vue和Element UI打印表格啦！