vue pdf 导出element ui 表格

你可以使用 jsPDF 和 html2canvas 库来导出 Element UI 表格到 PDF 文件中。

首先，安装这两个库：

npm install jspdf html2canvas

然后，创建一个导出函数：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export function exportPDF(tableId, fileName) {
  const table = document.getElementById(tableId); // 获取表格元素
  html2canvas(table).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(`${fileName}.pdf`);
  });
}

在调用该函数时，传入表格元素的 ID 和要导出的 PDF 文件名：

exportPDF('tableId', 'fileName');

这样，就可以将 Element UI 表格导出到 PDF 文件中了。