vue导出页面为pdf

要将 Vue 页面导出为 PDF 文件，可以使用 jsPDF 和 html2canvas 这两个库来实现。以下是一个简单的示例代码：

// 引入 jsPDF 和 html2canvas 库
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

// 创建一个函数，用于将页面导出为 PDF 文件
export function exportPDF () {
  // 获取需要导出的页面元素
  const element = document.getElementById('pdf')

  // 使用 html2canvas 将页面转换为 canvas
  html2canvas(element).then(canvas => {
    // 创建一个空的 jsPDF 对象
    const pdf = new jsPDF()

    // 将 canvas 转换为图片并添加到 pdf 中
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), element.offsetHeight / element.offsetWidth * pdf.internal.pageSize.getWidth())

    // 下载 PDF 文件
    pdf.save('export.pdf')
  })
}

上面的代码中，我们首先引入了 jsPDF 和 html2canvas 两个库。然后定义了一个名为 exportPDF 的函数，该函数会获取需要导出的页面元素，使用 html2canvas 将其转换为 canvas，然后将 canvas 转换为图片并添加到 jsPDF 对象中，最后下载生成的 PDF 文件。

需要注意的是，上面代码中的 element 变量是需要导出为 PDF 的元素的 ID，需要根据实际情况进行修改。此外，由于 jsPDF 对象的尺寸默认为 A4 大小，因此我们需要根据页面元素的高度和宽度比例来调整其高度，确保导出的 PDF 文件能够完整显示页面内容。