vue 查询数据之后导出pdf文件

要实现在 Vue 中查询数据并导出 PDF 文件，你需要使用一些库来生成 PDF。这里我们使用 `jspdf` 和 `html2canvas` 库来生成 PDF 文件。

首先你需要通过 Vue.js 发送一个查询数据的请求到后端，并且接收到后端返回的数据。在前端接收到数据后，你可以使用以下方法将数据生成为 PDF 文件：

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

...

// 假设你已经从后端接收到了数据，存储在 data 变量中
const doc = new jsPDF();
const tableRows = [];
const columns = [
  { title: '姓名', dataKey: 'name' },
  { title: '年龄', dataKey: 'age' },
  { title: '性别', dataKey: 'gender' },
];
data.forEach(item => {
  tableRows.push([item.name, item.age, item.gender]);
});

doc.autoTable({
  head: [columns.map(c => c.title)],
  body: tableRows,
});

// 生成 PDF 文件
html2canvas(document.querySelector('#pdf-content')).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const imgWidth = 210;
  const pageHeight = 295;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }
  doc.save('data.pdf');
});

上面的代码中，我们首先使用 `autoTable` 方法将数据渲染到 PDF 表格中，然后使用 `html2canvas` 库将页面上的内容转换为 canvas，最后使用 `addImage` 方法将 canvas 添加到 PDF 中。如果 PDF 文件内容超出一页，我们需要添加新的页面来显示全部内容，这里我们使用了一个 while 循环来实现。

需要注意的是，上面的代码中使用了 `#pdf-content` 选择器来选择需要生成 PDF 的内容，你需要在你的代码中添加一个具有该选择器的元素来包含需要导出的内容。

希望这个示例能够帮助你生成 PDF 文件。